深入border-radius

Posted 2023-03-21

参考技术A         在掘金上看到一个话题，如何用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.2，半径变大了，就得到了一个四分之一的圆，就可以看到如果实际形成圆，这个圆就会明显比图1.1大。

【 重点小tip 】而如图1.3所示：当圆角半径超设置的宽高时，最大的水平 和 垂直圆角半径还是分别等于 宽度 和 高度的大小，不会再变大了。

（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乘于对应的比例）

（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. 设置border-radius时，半径不会超过实际元素设置的width和height

2. 水平和垂直半径是按比例的

3. 圆角是会互相影响的，也是按比例来占有半径