最近一个项目中，迷恋上了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;
- }
嗯，果然有金属的感觉，很帅很帅
哎，可惜IE下根本看不出。同时，使用Tahoma貌似阴影效果也还不错。
确实，Tahoma也很棒，质感也很好。下次考虑用Tahoma，似乎Tahoma在各个系统上更通用一些吧？
关于IE嘛，我这属于内部系统，IE无视了，哈哈~
好家伙，别人都是有视ie，您哪里都无视ie了！老兄您真是在哪里都推进科技啊。服了！
哈哈
呵呵，IE下就是那个字体的效果没有，沟槽边框效果还是有的~
这不就是挖地雷么~
- -b 我也看着像扫雷……
有文字的td如果点击后也做一点移位，就更像一个按钮了
的确，这个我倒是没有做，似乎做起来不算难~这只是个引子~大家可以发挥创造~
关注你的博客很久了，问一哈你贴的代码用的是什么编辑器或是IDE？？？就是带有横线的那个，看起来很爽~！
你是说我博客里么？那个是wordpress的插件“coolcode”，能可以去找找。
评论里的 mouseover 真恶心啊!
鼠标滑下来的时候页面乱摔啊….
最近已经改过皮肤拉，没这个问题啦
金属风格，很帅
很赞，iPhone里面就常见这种效果
嗯，我做这个效果确实是模仿mac里做的。