border-radius属性详解

这个borde-radius属性其实也是一个简写值，它分别是 border-top-left-radius（左上圆角半径）, border-top-right-radius（右上圆角半径）, border-bottom-right-radius （右下圆角半径）,border-bottom-left-radius（左下圆角半径），如下图所示：

说到半径，我突然想起来了以前数学中学过关于圆跟半径的关系，百科如下：

在圆中，连接圆心和圆上任意一点的线段叫做圆的半径。通常用字母r来表示。
在球中，连接球心和球面上任意一点的线段叫做球的半径。
正多边形所在的外接圆的半径叫做圆内接正多边形的半径。

css中的radius多少也跟圆扯上关系，不过要分椭圆还是圆，因为css中分了垂直半径和水平半径。而几何中的圆只要确定了半径就可以画出一个圆出来。css中圆角，当使用一个值时，确定为圆角；当使用两个值时，确定一个椭圆圆角，但是不管是圆角还是椭圆角其实都有点像是背景和设置这个圆角半径的重叠产生的，浏览器会去除他们的没有交集的部分，留下有交集的部分，像CDR里面两个有交集的图形使用的相交。

可能一开始很难了解，不妨往下看吧。

说完了大概的东东，那么问题来了，圆角边框具体值有哪些，莫急少年，上w3c找码去。
对于border-radius，w3c的解释在右侧：
border-*-radius

属性名:	border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
属性值:	[ <length> | <percentage> ]{1,2}
初始值:	0
应用于:	除表单元格边框为collapse的所有元素
继承性:	无
百分比:	根据盒子边框border-box的宽度.
计算值:	两个长度，分别 <length> 或 percentages

w3c属性值详解：
[ <length> | <percentage> ]：必须出现一个值，可长度可百分比，比如：border-top-left-radius:5px,border-top-left-radius:5px 50%都是可行
{1,2}： 表示他们的值最小可以重复一次，最大可重复两次。假如只有一个值，表示圆角，那么它的水平距离和垂直距离相等，即第二个值复制第一个值；假如是两个值，那么确定一个椭圆角，第一个值椭圆的水平半径，第二值为椭圆的垂直半径，说起来有点拗口，直接上图：

只有1个值，如：border-top-left-radius:50px，表示半径为50px圆，如图：

标注错误了，盒子尺寸为：300*100

假如有两个值，如：border-top-left-radius:50px 100px，表示水平半径为50px，垂直半径为100px的椭圆，如图：

同理 border-top-right-radius（右上圆角半径）, border-bottom-right-radius （右下圆角半径）,border-bottom-left-radius（左下圆角半径），也是如此。你只要记住当某个角为一个值时，确定是一个圆，当使用两个值确定一个椭圆。
你可以轻戳右侧的demo：左上角为圆角和椭圆角demo