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

发布时间：2018-09-08 10:47:29 所属栏目：Asp教程来源：站长网

导读：纯css实现有质感的小圆角按钮，有金属质感，下面的代码中，可以看到，没有使用图片哦，不要感到怀疑，CSS可以的，给喜欢CSS的朋友们一点创意素材吧。推荐阅读：烈火提供的CSS中文参考手册演示效果： htmlheadtitle纯css实现的质感圆角按钮/titlestyle ty

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

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

　　演示效果：

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

（编辑：辽源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!