通过设置元素的border-radius值,可以给元素设置圆角边框,甚至实现绘制圆、半圆、四分之一圆等各种圆角图形。
一、border-radius使用
border-radius的数值有三种表示方法:px、%、em,对于border-radius的值的设置,我们常用的有三种写法:
(1)仅设置一个值
第一种方法,应该是我们最常用的一种情况了,常用来给按钮图标加圆角边框,或者画一个圆形按钮,仅需设置一个数值,即可给元素的四个边角设置统一的圆角弧度,例如:
![](https://i-blog.csdnimg.cn/blog_migrate/341f23772a3f101aad5b8a18899b888b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c86cd06fefecfdf47e93916eaf7c95dd.png)
(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的顺序),如下图所示:
![](https://i-blog.csdnimg.cn/blog_migrate/4941e14c8b056bc749eb66b9d4daa260.png)
(3)省略部分值
与padding和margin一样,border-radius同样可以省略部分值(对角线的值),省略时同样是采用对角线相等的原则,例如
![](https://i-blog.csdnimg.cn/blog_migrate/be45d53ee9ef72bac60523e6ef73b683.png)
二、border-radius数值设置及显示效果的理解
(1)使用px表示数值的情况
在使用px来表示圆角值的时候,圆角的弧度一般都是一个圆形的部分弧形,具体呈现的显示效果我是按如下方法与预估和理解的:
假设一个长200px,高150px的div对象,设置它的border-radius的值为30px,那么实际呈现的圆角,其实就是一个以30px为半径的圆顶格放置在四个边角后所呈现的弧度,语言表达的可能不够透彻,看下面的例子应该可以明白。
![](https://i-blog.csdnimg.cn/blog_migrate/cd7ac664801fbf2a225a767a3e9af2c9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a081ce83fd3cfc4b77e45cf70bde736c.png)
(2)使用%表示数值的情况
使用%来表示圆角值的时候,如果对象的宽和高是一样的,那判断方法与第一点一致,只不过想象的时候,需要将宽高乘以百分数换算一下;
如果宽高不一致,那产生的效果,其实就是以对象的宽高乘以百分数后得到的值r1和r2,作为两条半径绘制出来的椭圆产生的弧度
![](https://i-blog.csdnimg.cn/blog_migrate/0543d4005d909c5c6b9174a5e0634a00.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5f321e0589d932f0bbb867002a8886d9.png)
(3)需要注意的情况
在设置对象为圆形的时候,如果使用了border、padding等情况时,对象的实际显示宽高已经不再是设置的width和height的数值,如果border-radius设置的值仍为原本的width和height的一半,可能达不到预期的真正的圆形的效果。
如下面这个例子,给div加了10px的边框,但是border-radius仍是以100px的一半来设置的,显示出来的效果显然就不是一个真正的圆形。
![](https://i-blog.csdnimg.cn/blog_migrate/6bbcbd94ef0271af339eebf01a550de9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9b399f551b3ff9bbe2c7a494361431e4.png)
可以通过设置百分比50%的方式来解决这一情况,或者计算一下实际的高度再来设置border-radius的数值。上面这个例子,div实际的宽高应该是100 + 10 * 2 = 120px,所以border-radius应该设置为60px。
![](https://i-blog.csdnimg.cn/blog_migrate/8b2d16a0bb9e8834033ab63546c24644.png)
![](https://i-blog.csdnimg.cn/blog_migrate/25c95fae133fcbaaf7e2e8e30ebb369d.png)
参考:https://blog.csdn.net/m0_65251054/article/details/123731066