关于border-radius 以及 /50px

看了w3s关于border-radius属性的知识http://www.w3school.com.cn/cssref/pr_border-radius.asphttp://www.w3school.com.cn/cssref/pr_border-radius.asp总觉得还是有点迷糊，于是就实践一番稍作了解后在这做个总结。

先看w3c例子一：

border-radius:2em;

等价于：

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

例子一知道了 border-radius 值设置的顺序从 top-left 到top-right 到bottom-right 到bottom-left 

也就是一个四边形的 左上，右上，右下，左下。一个顺时针的方向。

如果

border-radius:2em 3em 1em 5em;

就顺时针一一对应就明白了。

再看w3c例子二：

border-radius: 2em 1em 4em / 0.5em 3em;

等价于

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

刚开始看这个例子就觉得：前半部分还是能看明白的 那后半部分 斜杠后面的是什么鬼？抱着这样的问题就去陶腾了。

先说下前半部分的意思。

可以看到 只设置了3个值 但最后一个值却是1em 没有设置的值是怎么来的呢，w3s上有给出解释：

如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同

这样就知道最后一个值是怎么来的了。

再来看斜杠和后面的值，如果先不管作用，先看是如何设置的看如下例子

border-radius: 2em 1em 4em / 0.5em 3em 1em;

等价于：

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 1em;
border-bottom-left-radius: 1em 3em;

再来一个：

border-radius: 2em 1em 4em / 0.5em 3em 1em 2em;

等价于：

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 1em;
border-bottom-left-radius: 1em 2em;

看了2个例子应该也就明白了。接下来看作用。

在这里我用div做个椭圆来解释作用，看代码

width: 200px;
height: 100px;
background-color:black;
border-radius: 100px / 50px;

等价于：

width:200px;
height:100px;
background-color:black;
border-top-left-radius:100px 50px;
border-top-right-radius:100px 50px;
border-bottom-right-radius:100px 50px;
border-bottom-left-radius:100px 50px;

就单看

border-top-left-radius:100px 50px;

这一行代码与

border-top-left-radius:50px 50px;

做比较（不会上传效果图很蛋疼）
这就看明白了平常的

border-top-left-radius:50px;

等价于

border-top-left-radius:50px 50px;

最后关于制作椭圆

width: 200px;
height: 100px;
background-color:black;
border-radius: 50%;

与上面的效果相同。至于为什么 如果上面看懂了，理解这玩意应该没问题。

莫打我-。-