groove边框的使用

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

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

  1. body{
  2.     background: #ddd;
  3.     font-family:Calibri;
  4.     color:#444;
  5. }
  6. table{
  7.     border-collapse:collapse;
  8. }
  9. th,td{
  10.      border: 2px groove #fff;
  11.     text-shadow: 0px -1px #bbb,1px 1px #fff;
  12. }
  13. td:active{
  14.     border-style: solid;
  15.     border-color: #aaa #fff #fff #aaa;
  16. }