今天图老师小编要向大家分享个CSS之圆角矩形教程，过程简单易学，相信聪明的你一定能轻松get！
【 tulaoshi.com - Web开发 】
!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" /
titlediv+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"/divdiv class="r2"/divdiv class="r3"/divdiv class="r4"/div/div
pIueuouii eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo/p
div class="rtop"div class="r4"/divdiv class="r3"/divdiv class="r2"/divdiv class="r1"/div/div
/div
/body
/hmtl
来源:https://www.tulaoshi.com/n/20160219/1617843.html
