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

发布时间：2018-08-17 03:34:31 所属栏目：访谈来源：站长网

导读：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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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