borderradius你了解多少？

　　在border-radius这个CSS3属性出现之前，我们要想在页面画个圆，务必借助图片来实现，出了这个border-radius属性之后，我们在页面中实现一个圆形是非常容易的。接下来我们仔细研究研究这个border-radius，看看它还有那些黑魔法？
　　Border-radius探究
　　通过border-radius轻而易举的可以划出一个圆。我们通过这样的一个小例子，开始探究border-radius。
　　HTML:
　　CSS:
　　.demo{
　　width:100px;
　　height:100px;
　　background-color:#f00;
　　border-radius:50px;
　　}
　　结果：
　　要想画正圆，我们首先要有一个正方形，所以在宽高100px的正方形，加上border-radius:50px;同学们可能好奇，它是怎么计算。50px代表的是什么？这时我们看看控制台：
　　上面的内容使我们展开的样子，虽说我们仅仅写了一个值50px；但是对于浏览器来说，他认为是四个一样的值。对于border-*-radius这种展开属性一一对应。看到这里大家能想到的类似的属性（设置一个属性，会被应用到多个展开属性的属性）:
　　margrin(margin-left,margin-top, margin-right, margin-bottom)
　　padding(padding-left,padding-top, padding-right, padding-bottom)
　　border(border-width,border-style, border-color, 还可以继续展开)
　　对于margin和padding来说，大家都知道他们的顺序是上右下左。以及1个值，多个值对应是什么，在这里就不多说了。类比的来看border-radius他的顺序，根据属性来看，不是上下左右这么简单。而是：左上，右上，右下，左下。
　　根据上面的分析，我们要是写：
　　border-radius:50px;与 border-radius:50px50px50px50px;一致。
　　（类似margin:10px; 与margin:10px 10px 10px 10px;）
　　与：
　　border-top-left-radius:50px;
　　border-top-right-radius:50px;
　　border-bottom-right-radius:50px;
　　border-bottom-left-radius:50px;
　　这里同学们要注意：我们习惯说，左上，右上，但是这个属性表示的时候先说明上下，再说左右，也是就是border-top-left-radius。
　　从上面的四个属性可以看出我们的圆，应该是由四部分构成，我们修改一下参数会发生什么？
　　CSS:
　　.demo{
　　width:100px;
　　height:100px;
　　background-color:#f00;
　　border-radius:50px000;
　　}
　　结果：
　　我们这么写，相当于border-top-left-radius:50px; 再看一张图：
　　通过这张图能说明白我们看到的这个圆角，其实是：以左上角为起点，以水平50px，垂直50px的点为圆心，50px为半径画的圆。与原本p的左上角的重叠部分。就是我们看到的圆角。同理：
　　Border-radius:0 50px 0 0; 与border-top-right-radius:50px;
　　这个是：以右上角为起点，以水平50px，垂直50px的点为圆心，50px为半径画的圆。与原本p的右上角的重叠部分。
　　同理右下，和左下我就不解释了。就是起点位置时右下角和左下角。同样这里需要注意。我们的圆不是直接画出来的，不是一个圆心，是四个圆心画出的四个圆与原来的p对应方向重叠形成的圆。
　　接下来探究一下，我们的属性能不能为负值？最大值又是多少？分别是什么含义？能为负值么？
　　我们设置成负值，看一下。
　　border-radius:-10px;
　　样式就不看，我们看一下样式报错：
　　说明值是无效的。为什么是无效的呢，上面我们都分析过了，我们要根据数值进行画圆。但是圆的半径是没有负值的。就算是可以为负值那就画到原来p的外侧了没有实际意义。所以不会有负值。
　　最大值是多少？
　　按照我们上面的分析，当我们设置的半径越大，圆也会变化，是不是意味着圆角可以无限大呢？我们试一下（假设宽高为一百像素的元素）
　　50px(50%)：
　　border-top-left-radius:50px;
　　结果：
　　100px(100%):
　　border-top-left-radius:100px;
　　结果：
　　>100px(>100%):
　　border-top-left-radius:150px;
　　结果：
　　发现没有变，这说明：圆的半径最大为p宽高的的一倍。长方形咋办？
　　我们来试一下：
　　.demo{
　　width:200px;
　　height:100px;
　　background-color:#f00;
　　border-top-left-radius:200px;
　　}
　　这是一个宽200px高100px的长方形。我们圆角的半径200px，是宽的一倍，是高的两倍。根据上面我们的分析，应该是一个宽200高100的椭圆。我们看一下结果：
　　不难发现是一个宽高100像素的圆。这根我们的预期不一样啊。
　　这里还有一个知识点要说明一下：
　　Border-top-left-raidus: x y;
　　看到这里大家似乎明白了，我们可以分别设置x偏移和y偏移，那意味着我们可以真正做椭圆了，我们试一下。
　　border-top-left-radius:200px100px;
　　结果：
　　一看还真是椭圆。
　　上面的那种情况
　　border-top-left-radius:100px;
　　与
　　border-top-left-radius:200px;
　　表现形式一致。
　　这个总结一下：
　　当使用一个值的时候，宽和高一致，当任何一个值（高和宽）超过宽高的最小值。宽高默认选择最短的值，也就是都选小值。因为200不能又表示200，又表示100只能100 100。
　　当使用两个值的时候，情况有些不一样了。看下面的例子：
　　.demo{
　　width:100px;
　　height:100px;
　　background-color:#f00;
　　border-top-left-radius:2000px100px;
　　}
　　你没有看错就是2000px;
　　我们看一下结果。
　　这里呢，我就直接说结果了。
　　当分开写时，最大值超过宽高最大值，会按照，宽高最大值等比缩放。
　　2000：100
　　那我们看看200：10
　　其实是一样的。（这里可能出现的情况，当图片过大GPU渲染会发生偏差，可能不一样）。
　　接下来我们看看，如果有border，这个圆角又该怎么算？
　　我们设置一个宽高100px，边框20px，圆角20px
　　CSS:
　　.demo{
　　width:100px;
　　height:100px;
　　border:20pxsolidlime;
　　background-color:#f00;
　　border-radius:20px000;
　　}
　　结果：
　　我们看出来外边框也被画成的圆角。是怎么画出来的呢，我借助一张图辅助解释一下:
　　在原来的基础画了一个border-top-left-radius为20px。宽高20px的正方扇形，正好把圆角盖住。
　　起点仍是左上角，画圆规则没变，最大值为
　　(border-top/border-left最小值)
　　+
　　(borderd-right/border-bottom最小值)
　　+
　　(padding-top,padding-left最小值)
　　+
　　(padding-bottom,padding-right最小值)
　　+
　　width/height最小值
　　像这样：
　　.demo{
　　width:100px;
　　height:50px;
　　padding:20px;
　　border:20pxsolidlime;
　　background-color:#f00;
　　border-top-left-radius:130px;
　　}
　　20+ 20 + 20 + 20 + 50 = 130
　　对于以上公式的计算，大家了解一下就可以。当我们属性分开写时。涉及到等比缩放，这里就不探究了，同学们可以自行尝试。
　　最后说一下border-radius高级写法
　　我们可以明确声明每个角的x,y同学们的第一个反应是
　　border-top-left-radius:10px 20px;
　　border-top-right-radius:10px 20px;
　　border-bottom-right-radius:10px 20px;
　　border-bottom-left-radius:10px2 0px;
　　这里有一种更简单的表达形式：
　　border-radius:10px/20px;
　　border-radius:10px 10px 10px 10px/ 20px 20px 20px 20px;
　　等同于上面的写法，就是把x和y的值，分别写出来，用/分开。
　　最后在补充一小点。
　　我们border-radius:后面两个值，和三个值的含义。
　　两个值：
　　当border-radius参数为两个值时（x,y）代表含义是
　　左上，右下：x
　　右上，左下：y
　　三个值：
　　当border-radius参数为两个值时（x,y, z）代表含义是:
　　左上：x
　　右上，左下：y
　　右下：z