groove边框的使用

最近一个项目中,迷恋上了groove边框。灰色的背景下使用这个边框看上去就好像是刻在金属上的感觉。再配合上text-shadow,文字也好像是蚀刻在金属上的了,我很喜欢。

点这里直接看demo
关键代码如下,我选用了Calibri字体,看上去实在一点。用其他字体效果就不会很好。
Update:经网友Sinina提醒,Tahoma也很有质感。上面的demo里我已经换成Tahoma字体了。Tahoma在各个平台下通用性更高一点。推荐优先考虑Tahoma。

body{
background: #ddd;
font-family:Calibri;
color:#444;
}
table{
border-collapse:collapse;
}
th,td{
border: 2px groove #fff;
text-shadow: 0px -1px #bbb,1px 1px #fff;
}
td:active{
border-style: solid;
border-color: #aaa #fff #fff #aaa;
}