了解CSS圆角：border-radius

border-radius是CSS中用于设置元素边框圆角的属性，可实现椭圆和各种圆角效果。它可以有1到4个值，分别对应不同角落的圆角半径，值可以用em、px等单位，也可以用/分隔设置x、y轴不同的半径。简写形式允许省略相同值，通过/可以单独指定x和y轴的半径。

什么是border-radius

border-radius是css的一个属性，主要用来给元素的外边框绘制圆角效果，通过这个属性，可以实现椭圆、叶子、花瓣等各式各样的圆角效果。

border-radius属性可以拆分为border-top-left-radius（左上角）、border-top-right-radius（右上角）、border-bottom-right-radius（右下角）、border-bottom-left-radius（左下角）四个属性。属性值的单位可以使用：em、px、百分比等等。

每一个角都包含x轴和y轴的半径值，使用 / 符号进行分隔，/ 前后最好都有一个空格。可以理解成每一个圆角都是由其x轴和y轴形成的椭圆的1/4弧。

border-radius值含义

border-radius 值 / 前后都可以有一到四个值：

没有 / ：值可以有一到四个值

各个角的 x、y 值相等，所以省略 / 符号

一个值：元素所有的角都会使用这个值作为圆角半径

1 border-radius: 20px;
2 /*相当于：所有角的x、y值都是20px
3 border-radius: 20px / 20px;
4 */

两个值：第一个值代表 border-top-left-radius(左上角) 和 border-bottom-right-radius(右下角) ，第二个值代表 border-top-right-radius(右上角) 和 border-bottom-left-radius(左下角) ，且各个角的x值与y值相等。

1 border-radius: 20px 40px;
2 /*相当于：
3 左上角 20px 20px; 
4 右下角 20px 20px; 
5 右上角 40px 40px; 
6 左下角 40px 40px;
7 border-radius: 20px 40px / 20px 40px;
8 */

三个值：第一个值代表 border-top-left-radius(左上角) ，第二个值代表 border-top-right-radius(右上角) 和 border-bottom-left-radius(左下角) ，第一个值代表 border-bottom-right-radius(右下角) ，且各个角的x值与y值相等。

1 border-radius: 20px 10px 40px;
2 /*相当于：
3 左上角 20px 20px; 
4 右上角 10px 10px; 
5 左下角 10px 10px;
6 右下角 40px 40px;
7 border-radius: 20px 10px 40px / 20px 10px 40px;
8 */

四个值：四个值按顺序分别代表 border-top-left-radius(左上角)、border-top-right-radius(右上角)、border-bottom-right-radius(右下角) 、border-bottom-left-radius(左下角)，且各个角的x值与y值相等。

1 border-radius: 10px 20px 30px 40px;
2 /*相当于：
3 左上角 10px 10px; 
4 右上角 20px 20px; 
5 右下角 30px 30px;
6 左下角 40px 40px;
7 border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;
8 */

有 / ：{1,4} / {1,4}

符号 / 前面是x值，后面是y值

下面举部分例子：

x1 / y1 ：这种形式表示所有角的x值为x1，y值为y1

1 border-radius: 20px / 30px;
2 /*相当于：
3 左上角 20px 30px; 
4 右上角 20px 30px; 
5 右下角 20px 30px;
6 左下角 20px 30px;
7 border-radius: 20px 20px 20px 20px / 30px 30px 30px 30px;
8 */

1 border-radius: 20px 40px / 30px;
2 /*相当于：
3 左上角 20px 30px; 
4 右上角 40px 30px; 
5 右下角 20px 30px;
6 左下角 40px 30px;
7 border-radius: 20px 40px 20px 40px / 30px 30px 30px 30px;
8 */

x1 x2 x3 / y1 ：这种形式表示左上角的x值为x1，右上角、左下角的x值为x2，右下角的x值为x3，y值都为y1

1 border-radius: 20px 40px 10px / 30px;
2 /*相当于：
3 左上角 20px 30px; 
4 右上角 40px 30px; 
5 右下角 10px 30px;
6 左下角 40px 30px;
7 border-radius: 20px 40px 10px 40px / 30px 30px 30px 30px;
8 */

x1 x2 x3 x4 / y1 ：这种形式表示左上角的x值为x1，右上角的x值为x2，右下角的x值为x3，左下角的x值为x4，y值都为y1

1 border-radius: 20px 40px 10px 10px / 30px;
2 /*相当于：
3 左上角 20px 30px; 
4 右上角 40px 30px; 
5 右下角 10px 30px;
6 左下角 10px 30px;
7 border-radius: 20px 40px 10px 10px / 30px 30px 30px 30px;
8 */

总结：

y值跟x值一样可以是一到四个，含义也是一样的，即
一个值：左上、右上、右下、左下
两个值：第一个值代表左上、右下；第二个值代表右上、左下
三个值：第一个值代表左上；第二个值代表右上、左下；第三个值代表右下
四个值：第一个值代表左上；第二个值代表右上；第三个值代表右下；第四个值代表左下

写全其实就是 border-radius: x1 x2 x3 x4 / y1 y2 y3 y4; 其他形式可以理解为是在简写

来源：https://blog.csdn.net/qq_43467284/article/details/131698846

posted on 2025-02-26 08:45 华安阅读(8) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· css剪裁clip-path——基本图形剪裁

· 一文读懂offsetHeight/offsetLeft/offsetTop/offsetWidth/offsetParent

· border属性之border-radius

· CSS（十八）：圆角边框

· CSS圆角样式border-radius

huaan011