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条评论

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

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

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

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

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

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

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

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

回复 张经纬 取消回复

您的电子邮箱地址不会被公开。

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