border-radius 你了解多少

border-radius 你了解多少

在 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: 50px 50px 50px 50px; 一致。
（类似 margin: 10px; 与 margin: 10px 10px 10px 10px;） 与：