css样式中的border-radius属性

通过设置元素的border-radius值，可以给元素设置圆角边框，甚至实现绘制圆、半圆、四分之一圆等各种圆角图形。

一、border-radius使用

border-radius的数值有三种表示方法：px、%、em，对于border-radius的值的设置，我们常用的有三种写法：

（1）仅设置一个值

第一种方法，应该是我们最常用的一种情况了，常用来给按钮图标加圆角边框，或者画一个圆形按钮，仅需设置一个数值，即可给元素的四个边角设置统一的圆角弧度，例如：

（2）设置四个方向的值

border-radius属性：border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

四个属性的简写模式，因此，border-radius : 30px;，其实等价于border-radius : 30px  30px  30px 30px;（ps：与padding和margin一样，各个数字之间用空格隔开）。

这里要注意四个数值的书写顺序，不同于padding和margin的“上、右、下、左”的顺序，border-radius采用的是左上角、右上角、右下角、左下角的顺序（如图1，2，3，4的顺序），如下图所示：

（3）省略部分值

与padding和margin一样，border-radius同样可以省略部分值（对角线的值），省略时同样是采用对角线相等的原则，例如

二、border-radius数值设置及显示效果的理解

（1）使用px表示数值的情况

　　在使用px来表示圆角值的时候，圆角的弧度一般都是一个圆形的部分弧形，具体呈现的显示效果我是按如下方法与预估和理解的：

　　假设一个长200px，高150px的div对象，设置它的border-radius的值为30px，那么实际呈现的圆角，其实就是一个以30px为半径的圆顶格放置在四个边角后所呈现的弧度，语言表达的可能不够透彻，看下面的例子应该可以明白。

（2）使用%表示数值的情况

使用%来表示圆角值的时候，如果对象的宽和高是一样的，那判断方法与第一点一致，只不过想象的时候，需要将宽高乘以百分数换算一下；

如果宽高不一致，那产生的效果，其实就是以对象的宽高乘以百分数后得到的值r1和r2，作为两条半径绘制出来的椭圆产生的弧度

（3）需要注意的情况

在设置对象为圆形的时候，如果使用了border、padding等情况时，对象的实际显示宽高已经不再是设置的width和height的数值，如果border-radius设置的值仍为原本的width和height的一半，可能达不到预期的真正的圆形的效果。

如下面这个例子，给div加了10px的边框，但是border-radius仍是以100px的一半来设置的，显示出来的效果显然就不是一个真正的圆形。

可以通过设置百分比50%的方式来解决这一情况，或者计算一下实际的高度再来设置border-radius的数值。上面这个例子，div实际的宽高应该是100 + 10 * 2 = 120px，所以border-radius应该设置为60px。

参考：https://blog.csdn.net/m0_65251054/article/details/123731066