介绍一种CSS3圆角+两种兼容性比较好的css圆角背景，之前也写过关于CSS制作三角形。
CSS3最简单的圆角属性为border-radius，具体使用如下：
div{border-radius:3px 3px 3px 3px;}
使用说明：
- 水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
- 如果只提供一个，将用于全部的于四个角。
- 如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
- 如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。
- 垂直半径也遵循以上4点。
演示
注意：css3圆角不支持IE9以下，可以使用下面提供的两种方法来支持。
第一种，使用背景+边框实现圆角
<!DOCTYPE html> <html lang="zh_CN"> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0; padding: 0;} body{margin-top: 30px; background: #fff;} .box{ overflow: hidden;width:300px; margin: 0 auto; } .b1{background: #ddd; height: 1px; font-size: 0; overflow: hidden; margin:0 2px;} .b2{border-left: 1px solid #ddd; border-right:1px solid #ddd; height: 1px; overflow: hidden; margin:0 1px; background: yellow;} .content{border-left: 1px solid #ddd; border-right: 1px solid #ddd; padding: 0 10px; background: yellow;} </style> <head> </head> <body> <div class="box"> <div class="b1"></div> <div class="b2"></div> <div class="content"> <h2>圆角标题</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est odit, autem? Asperiores nulla ab, natus quidem quia ducimus libero ut quam, porro veritatis pariatur minima architecto esse dolores possimus deserunt.</p> </div> <div class="b2"></div> <div class="b1"></div> </div> </body> </html>
演示
第二种，使用负值margin+边框实现圆角
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>自适应圆角</title> <style> body{margin:100px;} div, p{margin:0;padding:0;} .div1, .div2, .div3{display:inline-block;#display:inline;#zoom:1;position:relative;border-style:solid;border-color:black;} .div1{border-width:1px;} .div2, .div3{#left:-2px;border-width:0 1px;background-color:yellow;} .div2{margin:0 -2px;} .div3{margin:1px -2px;padding:0 6px;line-height:1.5;} .arrow1, .arrow2{position:absolute;top:7px;width:0;height:0;overflow:hidden;border-top:6px transparent dotted;border-bottom:6px transparent dotted;} .arrow1{left:-9px;border-right:6px black solid;} .arrow2{left:-8px;border-right:6px yellow solid;} </style> </head> <body> <div class="div1"> <div class="div2"> <div class="div3"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit odio dolores non dolorem autem numquam maiores porro nemo natus temporibus corporis magnam ab est, nobis aliquam, quae, officiis earum ad?</p> </div> </div> <div class="arrow1"></div> <div class="arrow2"></div> </div> </body> </html>
演示
说明：
1.由于IE6和IE7不支持inline-block，所以用另一种display:inline; zoom:1;
2.由于IE6和ie7不支持margin负值，用了position:relative定位，加了一个left负值。