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

概述感谢 www.52webui.com的投稿以前，发表过很多Css圆角的文章，有纯Css的，有Css+图像结合的，今天收到我爱设计网站长的投稿，是一款纯Css实现的圆角效果，代码简洁，没有太多美化，请大家学习与欣赏：Css部分：<style> #roundhorn01{width:161px; height:auto;} .b1,.b2,.b…

　　感谢 www.52webui.com 的投稿

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

　　CSS部分：

<style>
#roundhorn01{wIDth:161px; height:auto;}
.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b0{display:block;overflow:hidden;}
.b1,.b3b{height:1px;}
.b2,.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>

　　HTML部分：

<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"> 学院
</div>
<b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b></div>

　　运行演示：

<style>#roundhorn01{wIDth:161px; height:auto;}.b1,.b0{display:block;overflow:hidden;}.b1,.b3b{height:1px;}.b2,.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"> 学院 </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.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

总结

以上是内存溢出为你收集整理的又一例纯Css实现的圆角 代码简洁全部内容，希望文章能够帮你解决又一例纯Css实现的圆角 代码简洁所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。