CSS 圆角边框，无图、纯 CSS 实现的代码

　　CSS 圆角边框，无图、纯 CSS 实现的代码。方法简单，不过有点繁琐，建立了很多的Div，CSS圆角还有些更为简便的方法，本款只作为您的参考，希望为您学习CSS开拓一些思路。

　　演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <title>CSS圆角</title><br /> <style><br /> #box {<br /> font: 80%/1.6 Arial, Helvetica, sans-serif;<br /> color: #2D486C;<br /> background-color: transparent;<br /> margin: 0 20px 10px 0;<br /> }<br /> .roundborder {<br /> height: 1px;<br /> overflow: hidden;<br /> background-color: #B0C4DE;<br /> border-right: 1px solid #33527B;<br /> border-left: 1px solid #33527B;<br /> }<br /> .c1 {<br /> margin: 0 12px 0 12px;<br /> border: none;<br /> background-color: #33527B;<br /> }<br /> .c2 {<br /> margin: 0 9px;<br /> border-width: 0 3px;<br /> }<br /> .c3 {<br /> margin: 0 7px;<br /> border-width: 0 2px;<br /> }<br /> .c4 {<br /> margin: 0 6px;<br /> }<br /> .c5 {<br /> margin: 0 5px;<br /> }<br /> .c6 {<br /> margin: 0 4px;<br /> }<br /> .c7 {<br /> margin: 0 3px;<br /> }<br /> .c8 {<br /> margin: 0 2px;<br /> height: 2px;<br /> }<br /> .c9 {<br /> margin: 0 1px;<br /> height: 3px;<br /> }<br /> .content {<br /> height: auto;<br /> padding: 0 15px;<br /> }<br /> </style><br /> </head><br /> <body><br /> <div id="box"><br /> <div class="roundborder c1"></div><br /> <div class="roundborder c2"></div><br /> <div class="roundborder c3"></div><br /> <div class="roundborder c4"></div><br /> <div class="roundborder c5"></div><br /> <div class="roundborder c6"></div><br /> <div class="roundborder c7"></div><br /> <div class="roundborder c8"></div><br /> <div class="roundborder c9"></div><br /> <div class="roundborder content">烈火下载（www.veryhuo.com/down）提供各类编程源码、素材、书籍教程、设计模板、网页特效代码以及常用软件下载等，做有质量的学习型源码下载站。</div><br /> <div class="roundborder c9"></div><br /> <div class="roundborder c8"></div><br /> <div class="roundborder c7"></div><br /> <div class="roundborder c6"></div><br /> <div class="roundborder c5"></div><br /> <div class="roundborder c4"></div><br /> <div class="roundborder c3"></div><br /> <div class="roundborder c2"></div><br /> <div class="roundborder c1"></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>
提示：可修改后代码再运行!

热点

CSS 圆角边框，无图、纯 CSS 实现的代码

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

CSS 圆角边框，无图、纯 CSS 实现的代码

由 dawei

相关文章

COLMO以理享之光，照亮理享世界

美巢坊水固，兼顾质量与环保，硬核家装实力派

宗艺石材携手群核科技（酷家乐），开创设计家装一体化营销模式

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀