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;
}

《groove边框的使用》上有16条评论

  2. 哎，可惜IE下根本看不出。同时，使用Tahoma貌似阴影效果也还不错。

    回复

    1. 确实，Tahoma也很棒，质感也很好。下次考虑用Tahoma，似乎Tahoma在各个系统上更通用一些吧？
      关于IE嘛，我这属于内部系统，IE无视了，哈哈~

      回复

  3. 好家伙，别人都是有视ie，您哪里都无视ie了！老兄您真是在哪里都推进科技啊。服了！
    哈哈

    回复

  5. 有文字的td如果点击后也做一点移位，就更像一个按钮了

    回复

    1. 的确，这个我倒是没有做，似乎做起来不算难~这只是个引子~大家可以发挥创造~

      回复

  6. 关注你的博客很久了，问一哈你贴的代码用的是什么编辑器或是IDE？？？就是带有横线的那个，看起来很爽~！

    回复

  7. 评论里的 mouseover 真恶心啊!

    鼠标滑下来的时候页面乱摔啊….

    回复

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。