CSS 圆角框

其实这种圆角框是靠一个个容器堆砌而成的，每一个容器的宽度不同，这个宽度是由margin外边距来实现的，如：margin:0 5px;就是左右两侧的外边距5像素，从上到下有5条线，其外边距分别为5px，3px，2px，1px，依次递减。因此根据这个原理我们可以实现简单的html结构和样式

<html>

<head>

<title>css圆角效果</title>

div.RoundedCorner{background: #9BD1FA}

div.RoundedConn{background:#FFFFFF;margin:0px 4px;padding:4px 0px;}

b.rtop, b.rbottom{display:block;background: #FFFFFF}

b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}

b.r1{margin: 0 5px}

b.r2{margin: 0 3px}

b.r3{margin: 0 2px}

b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

</style>

</head>

<body>

</b>

<div class="RoundedConn">无图片实现圆角框<br/></div>

</b>

</div>

<br>

</body>

</html>

巴特西