深入border-radius
在掘金上看到一个话题，如何用border-radius画一个半圆，初看到这个题目觉得应该很简单，于是开始动手写，结果发现还是有很多可以研究的。
一、border-radius实现圆形
咱们来回忆一下我们经常用到的：画一个圆形：
.circle {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 50%;
}
border-radius: 50%
二、border-radius重要基本知识
border-radius其实每个角有两个值分别控制其圆角，一个是水平圆角半径，另一个是垂直圆角半径。
border-radius 其实是四个角的缩写，分别是 border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius；而这四个圆角，控制其形状的又分为水平和垂直两个值；所以平时我们写border-radius: 50%; 实际上是
border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
分别代表：左上水平圆角半径 右上.. 右下.. 左下.. / 左上垂直圆角半径 右上垂直圆角半径 右下.. 左下..
三、从实现半圆发现的规律
1. 一个圆角
（1） 一个圆角，宽高相同
图1.1：border-top-left-radius: 50%; 即圆角水平和垂直半径都是100px；分别是宽度和高度的一半
图1.2：border-top-left-radius: 100%; 即圆角水平和垂直半径都是200px；和宽度高度一致
图1.3：设置border-top-left-radius超过宽高度，半径也会被默认为100%；不会再变大
上面这两张截图例子很简单，就是当控制一个圆角时，会根据它设置的圆角半径大小来画圆，半径越大，画的圆就越大，你瞅瞅图1.1半径小，实际上会形成的圆就是小的，到图1.2，半径变大了，就得到了一个四分之一的圆，就可以看到如果实际形成圆，这个圆就会明显比图1.1大。
【重点小tip】而如图1.3所示：当圆角半径超设置的宽高时，最大的水平 和 垂直圆角半径还是分别等于 宽度 和 高度的大小，不会再变大了。
（2）一个圆角，宽高不同
图2.1：水平和垂直圆角半径分别为宽高的一半
图2.2：圆角水平半径跟宽度一样；垂直半径是高度的一半
图2.3：半径与宽高一致
图2.4：水平圆角半径是宽度的2倍，垂直圆角半径与高度一样
其实图2.1~图2.3规律跟上面图1.1~图1.3一个圆角，宽高相同的规律一致。那么此时图2.4就不一样，重点来了！
图2.4中，当水平圆角半径设置为宽度的2倍，而垂直圆角半径跟高度一致时，出现的效果是水平圆角半径与宽度一致（这个就是上面图1.3时说的不会超过实际的宽度，超过时就会等于宽度），这是合理；但是此时垂直圆角半径居然变成了高度的1/2。
在图2.4例子中，width:height==1:2，而左上角圆角的水平圆角半径:垂直圆角半径=1:1；那么此时可以看出水平圆角半径和width是1:1，而垂直圆角半径跟height是1:2，从例子来看，垂直半径就是height的一半了。此时就出现了今日第二小tips：
【重点小tip】等比例特征，根据width和height比例，来推断border-radius的水平和垂直比例，因为实际width:height是1：2，而水平半径：垂直半径=1：1，所以垂直半径就只能跟水平一样都是width，如果此时想要实现垂直半径等于高度，那么就需要等比例，即水平半径：垂直半径=width:height = 1:2，即
border-top-left-radius: 200px 400px; 或
border-top-left-radius: 100px 200px; 相当于 border-top-left-radius: 100% 100%;（这比例是根据width和height乘于对应的比例）
2. 两个圆角
（1）两个圆角，宽高相同
两个圆角按比例来分配
上图的例子说明一个问题：两个角是会互相影响的，第二个例子中，左上角圆角和左下角圆角分别都是200px;(height是200px)，但是最后是按照它们的比例：1:1来分别分100px给它们；而此时因为垂直和水平半径比例是1：1，此时垂直半径是100px；水平半径跟着也缩减为100px；
同理，第三个例子中左上角和左下角的比例是1：2，那么从例子看它们的圆角半径（包括水平和垂直半径）也跟着成比例。
那么这一小节又可以总结一个小tip啦~
【重要小tip】圆角之间会互相影响，根据它们在垂直还是水平分别按照比例得到是height还是width的百分比来画圆角。而相应的，其他的就会根据上面的两个小tips再继续形成最终的圆角~
四、实现一个半圆
那么现在根据上面的知识应该能画出我们文章最初提出来的问题，如何画个半圆。控制wdith:height=1:2;而border-radius中水平半径是width;垂直半径是width;就能画出一个半圆了；即水平和垂直半径的比例是1:1;
半圆例子1：实际px
半圆例子2：比例
半圆例子3：border-radius合并简写
总结：
1. 设置border-radius时，半径不会超过实际元素设置的width和height
2. 水平和垂直半径是按比例的
3. 圆角是会互相影响的，也是按比例来占有半径
