又一例纯Css实现的圆角 代码简洁

　　感谢 www.52webui.com 的投稿

　　以前，烈火发表过很多Css圆角的文章，有纯Css的，有Css+图像结合的，今天收到我爱设计网站长的投稿，是一款纯Css实现的圆角效果，代码简洁，没有太多美化，请大家学习与欣赏：

　　Css部分：

　　HTML部分：

　　运行演示：

<style> #roundhorn01{width:161px; height:auto;} .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b0{display:block;overflow:hidden;} .b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;} .b2,.b3,.b4,.b2b,.b3b,.b4b,.b0{border-left:1px solid #30b1e5;border-right:1px solid #30b1e5;} .b1,.b1b{margin:0 5px;background:#30b1e5;} .b2,.b2b{margin:0 3px;border-width:2px;} .b3,.b3b{margin:0 2px;} .b4,.b4b{height:2px;margin:0 1px;} .d1{background:#ECF7FB;} .k0{height:auto;} </style> <div id="roundhorn01"> <b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b> <div class="b0 d1 k0"> 烈火学院 Liehuo.Net </div> <b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b></div><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：辽源站长网）

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