纯CSS圆角的实现代码简洁效果强大

发布时间：2018-09-19 20:10:05 所属栏目：Unix 来源：站长网

导读：一款方法相对精简的CSS圆角效果，代码确实不多，而且圆角效果特别好，我比较喜欢，有金属的质感，大家完全可以把圆角定义成类，随时用随时调用，应该不错。请看实例演示： htmlheadtitle纯css实现圆角按钮/titlestyle type=text/css.a{float:left; border

　　一款方法相对精简的CSS圆角效果，代码确实不多，而且圆角效果特别好，我比较喜欢，有金属的质感，大家完全可以把圆角定义成类，随时用随时调用，应该不错。

　　请看实例演示：

<html> <head> <title>纯css实现圆角按钮</title> <style type="text/css"> .a{float:left; border-width:1px 0; border-color:#bbbbbb; border-style:solid;} .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; color:#f9f9f9; background:#f9f9f9; border-bottom:2px solid #eeeeee;} .d{padding:0 8px; line-height:22px; font-size:12px; color:#000000; clear:both; 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> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：新余站长网）

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

纯CSS圆角的实现 代码简洁效果强大

纯CSS圆角的实现代码简洁效果强大