border-radius属性详解

一、 应用场景

border-radius属性的应用，大家最熟悉的应该就是头像了，但其实，border-radius属性还是很强大的，你能相信，下面两个图形都是用border-radius画出来的么？

下面是我结合网上大佬们的博客资料以及自己的实践结果得出来的一些结论，有什么不对的望各位大神们批评指出，谢谢~

二、border-radius 画圆

我们经常用下面的这种方式画圆

<div class="radius-test1"></div>.radius-test1{        width: 100px;        height: 100px;        background: #000;        border-radius: 50%;    }

效果图：

这个50%是谁的50%，这个圆是怎么画出来的呢？下面验证一下：
注：其实border-radius值的写法可以是八个、三个，也可以是单值，理解起来有些困难，大家可以参考http://www.zhangxinxu.com/wordpress/2015/11/css3-border-radius-tips/
下面的是我对单值的理解版本（因为画圆只需要单值不需要那么复杂）

<div class="test radius-test1"></div><div class="test radius-test2"></div>.test{position: absolute;}.radius-test1{width: 100px;height: 100px;background: #000;border-radius: 50%;z-index: 1}.radius-test2{width: 100px;height: 100px;background: #DC143C;}

效果图：

radius-test2代表的是radius-test1还没有被圆化前的正方形，可以看出来黑色的圆是正方形的内接圆，圆的半径是正方形边长的一半，也就是100px的50%，如果border-radius=0，就是一个正方形，没有变化。但是我觉得其中还是出现了一个圆——正方形的外接圆。

因为我们规定了div是长宽100px，所以就只会显示黑色的正方体。如果border-radius=20%呢？

这个时候已经是圆角矩形了，是通过下面的这种方式截出来的：

去掉外面黑色的四个小角，剩余的黑色就会出现在显示屏上。如果我们把值设为50%~无穷大，会发现是没有变化的，都是50%值的样子。

总结：
border-radius属性的百分比，在没有设置border的情况下，是相对于边长。
当值为50%时，会以正方形两条对角线的交点为圆心，画一个半径为边长50%的圆（内接圆）
当值为0时，会以正方形两条对角线的交点为圆心，画一个半径为对角线一半长的圆（外接圆）
我猜想border-radius属性设置了最大圆和最小圆，对应为外接圆和内接圆，只会在这两个同心圆之间做切割
（忽视这个又丑又不标准的图，理解内容就好^_^）

圆的半径范围就是红色的那一段+边长的一半，红色的部分根据border-radius取值，然后画圆做切割。

理解了上面的，就好理解长方形画椭圆了。

其实我这里有个疑问，在给正方形设置了border属性之后，border-radius的值对于内外正方形的影响程度刚开始不一样，但是到50%的时候又相同了。等待以后看到相关资料再来解答。

三、border-radius 多值

border-radius的八值写法：

border-radius: 左上角水平圆角半径大小 右上角水平圆角半径大小 右下角水平圆角半径大小 左下角水平圆角半径大小/左上角垂直圆角半径大小 右上角垂直圆角半径大小 右下角垂直圆角半径大小 左下角垂直圆角半径大小;border-radius: 300px 300px 300px 300px/300px 300px 300px 300px;

border-radius的三值写法：

border-radius: 左上角水平垂直圆角半径大小 右上角和左下角水平垂直圆角半径大小 左下角水平垂直圆角半径大小border-radius: 300px 300px 300px;

水平方向一定要和垂直方向一起使用 不然就会无效

尝试着去修改border-radius八值或者三值其中的值，就会画出各式各样的图案哦~