最近一个项目中,迷恋上了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;
- }