今天小编跟大家讲解下有关div+css制作圆角矩形的原理示例解读 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关div+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"lang="gb2312"> <head> <meta http-equiv="Content-Type"content="text/HTML; charset=gb2312"/> <title>div+CSS圆角矩形</title> <style type="text/CSS"> body{padding: 20px;background-color: #FFF;font: 100.01%"Trebuchet MS",Verdana,Arial,sans-serif} div#nifty{ margin: 0 10%;background: #9BD1FA} p {padding:10px} div.rtop, div.rbottom{display:block;background: #FFF} div.rtop div, div.rbottom div{display:block;height: 1px;overflow: hidden; background: #9BD1FA} div.r1{margin: 0 5px} div.r2{margin: 0 3px} div.r3{margin: 0 2px} div.rtop div.r4, div.rbottom div.r4{margin: 0 1px;height: 2px} </style> </head> <body> <div id="nifty"> <div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div> <p>这是您要放的内容！</p> <div class="rtop"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div> </div> </body> </hmtl>来源：爱蒂网
