标签：
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯CSS实现圆角边框</title> <style type="text/css"> .yBoder{margin-top:50px; text-align:center;} .ytop ,.ybottom {display:block;background:#fff;} .rtop b,.rbottom b{display:block;overflow:hidden;} .r2,.r3,.r4{background:#fff;border-left:1px solid #9bd1fa; border-right:1px solid #9bd1fa;} .r1,.r2,.r3{height:1px;} .r1 {margin:0 4px;background:#9bd1fa;} .r2{margin:0 3px;border-width:0 2px;} .r3{margin:0 2px;} .r4 {margin:0 1px;height:2px;} .ybox {display:block; background:#FFF; border:0 solid #9bd1fa; border-width:0 1px;} </style> </head> <body> <div class="yBoder"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> <div class="ybox"> 1<br /> 2<br /> 3 </div> <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> </div> <!--用纯css写圆角有布局问题 大家一定都知道吧--> </body> </html>
标签：
原文地址：http://www.cnblogs.com/hjlost/p/4290662.html
