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

发布时间：2018-09-05 18:52:55 所属栏目：专访来源：站长网

导读：CSS 圆角边框，无图、纯 CSS 实现的代码。方法简单，不过有点繁琐，建立了很多的Div，CSS圆角还有些更为简便的方法，本款只作为您的参考，希望为您学习CSS开拓一些思路。演示： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.

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

（编辑：济南站长网）

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