CSS圆角

介绍一种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点。

演示

CSS圆角-风君子博客

注意：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>