圆角按钮Button,金属质感,纯CSS无图片

　　纯css实现有质感的小圆角按钮，有金属质感，下面的代码中，可以看到，没有使用图片哦，不要感到怀疑，CSS可以的，给喜欢CSS的朋友们一点创意素材吧。

　　推荐阅读：烈火提供的CSS中文参考手册

　　演示效果：

<html><br /> <head><br /> <title>纯css实现的质感圆角按钮</title><br /> <style type="text/css"><br /> body{font-size:12px;}<br /> .a{display:inline-block; border-width:1px 0; border-color:#bbbbbb; border-style:solid; vertical-align:middle; *display:inline; zoom:1;}<br /> .b{height:22px; border-width:0 1px; border-color:#bbbbbb; border-style:solid; margin:0 -1px; background:#e3e3e3; position:relative; _float:left;}<br /> .c{line-height:10px; background:#f9f9f9; border-bottom:2px solid #eeeeee;}<br /> .d{padding:0 8px; line-height:22px; color:#000000; margin-top:-12px; cursor:pointer;}<br /> </style><br /> </head><br /> <body><br /> <div class="a"><br /> <div class="b"><br /> <div class="c"> </div><br /> <div class="d">css圆角按钮</div><br /> </div><br /> </div><br /> <br /> <div class="a"><br /> <div class="b"><br /> <div class="c"> </div><br /> <div class="d">css圆角按钮2</div><br /> </div><br /> </div><br /> </body><br /> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

圆角按钮Button,金属质感,纯CSS无图片

由 dawei

您错过了

AI在情感识别与计算领域的运用

AI在交通管理与规划领域的应用

AI在提升公共安全管理效率和效果方面的应用与成效分析

人工智能技术正在推动图书馆的管理和服务向更高水平发展

圆角按钮Button,金属质感,纯CSS无图片

由 dawei

相关文章

使用softaculous创建WordPress临时站点

怎样建网站更有利于网站推广和优化？

中企动力带你了解舌尖上的餐饮网站设计趋势

您错过了

AI在情感识别与计算领域的运用

AI在交通管理与规划领域的应用

AI在提升公共安全管理效率和效果方面的应用与成效分析

人工智能技术正在推动图书馆的管理和服务向更高水平发展