-webkit-border-radius圆角属性

关于SafariCSSRef中文手册仅仅只是对 -webkit 内核浏览器做测试，不对 -moz/-ms/-o 等内核浏览器测试；
1、请使用chrome或者Safari浏览相关demo；
2、中文手册所有属性前缀统一为 -webkit-*，其他非 -webkit前缀的请自行前往w3school学习

指定盒子四个角的弧度。PS：不管有没有设置 border 属性，该属性依然会应用于整个背景层，具体的裁剪位置根据background-clip 的属性值来决定。该属性是简写值，其他子属性下面会有链接~.~

语法

-webkit-border-radius: radius;

-webkit-border-radius: horizontal_radius vertical_radius;

参数

radius
圆角半径
horizontal-radius
水平半径
vertical-radius
垂直半径

允许类型

长度单位，相对值：em、ex、ch、rem；视窗百分比单位：vh、vw、vmin、vmax；绝对单位：px、mm、cm、in、pt、pc[1/6 1in]，具体代表什么多少值，还希望各位自行去脑补 http://drafts.csswg.org/css-values-3/#lengths

其他相关属性

-webkit-border-radius
-webkit-border-top-left-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius

探讨

这个属性可以设置1个或者2个参数。假如只指定一个参数，那么代表一个水平半径和垂直半径相等，这时构成一个圆角；假如指定两个参数，第一个参数代表水平半径，第二个参数代表垂直半径（兼容性提示：在IE，假如书写方向是 tb-rl 那么这2个参数相反，考虑如下代码），并且该属性支持动画

-webkit-border-radius:50px 20px;
-webkit-writing-mode: vertical-rl;  /*for chrome firefox*/
writing-mode:tb-rl;	/*for IE*//*此时，50px代表垂直半径，20代表水平半径，*/

根据语法举个栗子

水平和垂直半径可以允许设置1~4个值；同时，假如水平半径与垂直半径等同，这个边角就是一个圆形边角，那么此时的数值仅仅需要设置第一个半径值，第二个半径浏览器会自动补全；假如你想要让边角构成椭圆的边角，那么此时需要设定其垂半径的值，此时水平半径和垂直半径需要用 （ x / y ）斜线来分开，x代表水平半径，y代表垂直半径，每个值之间用空格来分开，温馨提示：假如书写方向为tb-rl，那么这两个值所代表的方向会相反！
目前我们仅仅讨论书写为从左向右的，他们之间有如下设置：

/* 圆形边角 *//* 假如只设定一个值，那么这个数值分别代表左上角 top-left，右上角top-right，右下角bottom-right，左下角 bottom-left */
-webkit-border-radius: 10px;

/* 假如设定2个值，分别代表左上角top-left 和 右下角bottom-right | 右上角top-right 和 左下角bottom-left */
-webkit-border-radius: 10px 5%;
/*PS：这里有一个BUG，我在本地测试的时候，假如只是输入上面代码，那么在chrome开发版42版本居然显示为椭圆，不懂是版本的问题还是本身的机制问题，so，你或者也应该做一下带 -webkit和不带-webkit的区别哈~*//* 假如设置3个值，分别代表左上角top-left | 右上角top-right 和 左下角bottom-left | 右下角bottom-right */
-webkit-border-radius: 2px 4px 2px;

/* 假如设置4个值，分别代表左上角top-left | 右上角top-right | 右下角bottom-right | 左下角bottom-left */
-webkit-border-radius: 1px 0 3px 4px;


/* 椭圆边角 *//* 第一个值代表水平半径 / 第二个值代表垂直半径 */
-webkit-border-radius: 10px 5% / 20px;
/* 等同于 */
-webkit-border-radius: 10px 5% 10px 5% / 20px 20px 20px 20px;
/* 表示左上角top-left水平/垂直半径值 10px 20px【下同】，右上角right-top 5% 20px，右下角bottom-right 10px 20px，左下角bottom-left 5% 20px ，其实这里左上角和右下角等同，右上角和左下角等同*/

-webkit-border-radius: 10px 5% / 20px 30px;
/* 等同于 */
-webkit-border-radius: 10px 5% 10px 5% / 20px 30px 20px 30px;
/* 表示左上角top-left水平/垂直半径值 10px 20px【下同】，右上角right-top 5% 30px，右下角bottom-right 10px 20px，左下角bottom-left 5% 30px ，这里左上角和右下角等同，右上角和左下角等同*/

-webkit-border-radius: 10px 5px 2em / 20px 25px 30%;
/* 等同于 */
-webkit-border-radius:10px 5px 2em 5px / 20px 25px 30% 25px
/* 表示左上角top-left水平/垂直半径值 10px 20px【下同】，右上角right-top 5px 25px，右下角bottom-right 2em 30px，左下角bottom-left 5px 25px，这里右上角和左下角相同，左上和右下不同 */

-webkit-border-radius: 10px 5% / 20px 25em 30px 35em;
/* 等同于 */
-webkit-border-radius: 10px 5% 10px 5% / 20px 25em 30px 35em;
/* 表示左上角top-left水平/垂直半径值 10px 20px【下同】，右上角right-top 5% 25em，右下角bottom-right 10px 30px，左下角bottom-left 5% 35em，这里左上角、右上角、右下角、左下角都不相同 */

当然上面仅仅只是一小部分的测试，你还可以测试假如水平半径和垂直半径只有一个值的时候或者是更多，更多精彩等你发掘！

PS：根据我个人测试了一下，显示效果居然一样，我在想是不是需要把屏幕倒过来？但是假如用 margin 来测试书写方向，就可以直观显示出来，不懂为何在这没反应。【望告知】

支持度

Safari 3.0+
iOS 1.0+

例子

	div {
	  -webkit-border-radius: 10px;
	}
			

	div {
		border-radius:10px;
	  -webkit-border-radius: 10px;
	}
			

	div {   
	  -webkit-border-radius: 10px 20px 1em;
	}
			

	div {   
	  -webkit-border-radius: 10px 20px 0em 10%;
	}
			

	div {   
	  -webkit-border-radius: 10px 5% / 20px;
	  等同
	  -webkit-border-radius: 10px 5% 10px 5% / 20px 20px 20px 20px;
	}
			

	div {   
	  -webkit-border-radius: 10px 5% / 20px 30px;
	  等同
	  -webkit-border-radius: 10px 5% 10px 5% / 20px 30px 20px 30px;
	}
			

	div {
	  -webkit-border-radius: 10px 5px 2em / 20px 25px 30%;
	  等同
	  -webkit-border-radius:10px 5px 2em 5px / 20px 25px 30% 25px;
	}
			

	div {
	  -webkit-border-radius: 10px 5% / 20px 1em 30px 2em;
	  等同
	  -webkit-border-radius: 10px 5% 10px 5% / 20px 1em 30px 2em;
	}
			

参考资料：
css-values-3/#lengths
-webkit-border-radius