css圆角（border-radius）的深入理解

css圆角（border-radius）的深入理解

写在前面：

1.介绍：
	在border-radius出来之前，传统的生成圆角，必须使用多张图片作为背景图案，浪费很多的时间。
	css3圆角的出现，使我们再也不必浪费时间去制作这些图片了，并且可以减少文件维护的工作量、提高网页性能，增加视觉可靠性。

2.border-radius:
	这是一个简写属性，用来设置：
		border-top-left-radius:边框左上角.
		border-top-right-radius:边框右上角.
		border-bottom-right-radius:边框右下角.
		border-bottom-left-radius:边框左下角.
	默认值：0	不可继承
	值：固定的px值定义圆形半径或者椭圆的半长轴。不能为负值。
		使用百分数定义圆形半径或者椭圆的半长轴，水平半轴相对于盒模型的宽度，垂直半轴相对于盒模型的高度。同样不能为负值。
	
3. （圆形）半径第一种语法及取值（1~4个值）：
	border-radius:radius.
		一个值：
			控制的是4个边框角。
	border-radius:top-left-and-bottom-right top-right-and-bottom-left.
		两个值：
			第一个值控制的是左上和右下角，第二个值控制的是右上和左下角。
	border-radius:top-left top-right-and-bottom-left bottom-right.
		三个值：
			第一个值控制的是左上角，第二个值控制的是右上和左下角，第三个值控制的是右下角。
	border-radius:top-left top-right bottom-right bottom-left.
		四个值：
			第一个值控制的是左上角，第二个值控制的是右上角，第三个值控制的是右下角，第四个值控制的是左下角。
	注意：以上的所有值都代表圆形的半径。

4.（椭圆）半径第二种语法及取值（1~4个值）：
	border-radius:(horizontal-radius)/radius.
		一个值：
			控制的是4个边框角。
	border-radius:(horizontal-radius)/top-left-and-bottom-right top-right-and-bottom-left.
		两个值：
			第一个值控制的是左上和右下角，第二个值控制的是右上和左下角。
	border-radius:(horizontal-radius)/top-left top-right-and-bottom-left bottom-right.
		三个值：
			第一个值控制的是左上角，第二个值控制的是右上和左下角，第三个值控制的是右下角。
	border-radius:(horizontal-radius)/top-left top-right bottom-right bottom-left.
		四个值：
			第一个值控制的是左上角，第二个值控制的是右上角，第三个值控制的是右下角，第四个值控制的是左下角。
	注意：horizontal-radius代表水平半径，‘/’符号之后的代表垂直半径，horizontal-radius只要存在，就相当于设置了椭圆的水平半径，跟‘/’符号后的每个垂直半径分别组成一个椭圆来达到圆角的效果，并且只能写在最前面。

5.border-radius在以前的浏览器版本存在兼容性问题，因为移动端更新较慢，在移动端开发的时候尽量使用px值来设置圆角，不要用百分比来设置。

MDN上的解释：CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

可能还有些不理解，下面通过举例来说明。

盒模型长宽一致的情况下：

演示模板：

<div id="box"></div>

css代码：

#box{
  width:200px;
  height:200px;
  border:1px solid red;
}

页面效果：

设置border-radius:50px（border-radius:25%）：

	#box{
	  width:200px;
	  height:200px;
	  border:1px solid red;
	  border-radius:50px;
	}

页面效果：

因为border-radius:50px，就相当于设置了一个50px半径的圆，分别向盒模型的4个角怼上去，接触之后，以盒模型两边接触之间的弧长作为盒模型圆角，如下图：

设置border-radius:20px 50px（border-radius:10% 25%）：

#box{
  width:200px;
  height:200px;
  border:1px solid red;
  border-radius:20px 50px;
}

页面效果及解释：

设置border-radius:20px 50px 40px（border-radius:10% 25% 20%）：

#box{
  width:200px;
  height:200px;
  border:1px solid red;
  border-radius:20px 50px 40px;
}

页面效果及解释：

设置border-radius:20px 30px 40px 50px（border-radius:10% 15% 20% 25%）：

#box{
  width:200px;
  height:200px;
  border:1px solid red;
  border-radius:20px 30px 40px 50px;
}

页面效果及解释：

当半径是盒模型一半的时候就是一个真正的圆了：

设置border-radius:100px（border-radius:50%）：

#box{
  width:200px;
  height:200px;
  border:1px solid red;
  border-radius:100px;
}

页面效果及解释：

盒模型长宽不一致的情况下：

演示模板：

<div id="box"></div>

css代码：

#box{
  width:400px;
  height:200px;
  border:1px solid red;
}

页面效果：

设置border-radius:100px/50px（border-radius:25%/25%）：

#box{
  width:400px;
  height:200px;
  border:1px solid red;
  border-radius:100px/50px;
}

页面效果及解释：

设置border-radius:100px/50px 20px（border-radius:25%/25% 10%）：

#box{
  width:400px;
  height:200px;
  border:1px solid red;
  border-radius:100px/50px 20px;
}

页面效果及解释：

设置border-radius:100px/50px 20px 40px（border-radius:25%/25% 10% 20%）：

#box{
  width:400px;
  height:200px;
  border:1px solid red;
  border-radius:100px/50px 20px 40px;
}

页面效果及解释：

设置border-radius:100px/20px 30px 40px 50px（border-radius:25%/10% 15% 20% 25%）：

#box{
  width:400px;
  height:200px;
  border:1px solid red;
  border-radius:100px/20px 30px 40px 50px;
}

页面效果及解释：

当椭圆的水平半径=盒模型的宽度，椭圆的垂直半径=盒模型的高度，就是一个真正的椭圆了：

设置border-radius:200px/100px（border-radius:50%/50%）：

#box{
  width:400px;
  height:200px;
  border:1px solid red;
  border-radius:200px/100px;
}

页面效果及解释：

设置水平半径和垂直半径的时候，水平半径要写在最前面，用‘/’符号和后面的垂直半径分割开来。

注意：border-radius设置百分比取得是盒模型长宽的百分比，px也好，百分比也好，border-radius的值大于了盒模型长宽的一半的时候，结果都是圆或者椭圆。