了解CSS圆角：border-radius

最新推荐文章于 2025-03-27 11:09:54 发布

WLJIAO

最新推荐文章于 2025-03-27 11:09:54 发布

阅读量7.3k

点赞数 4

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_43467284/article/details/131698846

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS圆角：border-radius

什么是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 值相等，所以省略 / 符号

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

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

在这里插入图片描述

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

border-radius: 20px 40px;
/*相当于：
左上角 20px 20px; 
右下角 20px 20px; 
右上角 40px 40px; 
左下角 40px 40px;
border-radius: 20px 40px / 20px 40px;
*/

在这里插入图片描述

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

border-radius: 20px 10px 40px;
/*相当于：
左上角 20px 20px; 
右上角 10px 10px; 
左下角 10px 10px;
右下角 40px 40px;
border-radius: 20px 10px 40px / 20px 10px 40px;
*/

在这里插入图片描述

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

border-radius: 10px 20px 30px 40px;
/*相当于：
左上角 10px 10px; 
右上角 20px 20px; 
右下角 30px 30px;
左下角 40px 40px;
border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;
*/

在这里插入图片描述

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

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

下面举部分例子：

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

border-radius: 20px / 30px;
/*相当于：
左上角 20px 30px; 
右上角 20px 30px; 
右下角 20px 30px;
左下角 20px 30px;
border-radius: 20px 20px 20px 20px / 30px 30px 30px 30px;
*/

在这里插入图片描述

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

border-radius: 20px 40px / 30px;
/*相当于：
左上角 20px 30px; 
右上角 40px 30px; 
右下角 20px 30px;
左下角 40px 30px;
border-radius: 20px 40px 20px 40px / 30px 30px 30px 30px;
*/

在这里插入图片描述

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

border-radius: 20px 40px 10px / 30px;
/*相当于：
左上角 20px 30px; 
右上角 40px 30px; 
右下角 10px 30px;
左下角 40px 30px;
border-radius: 20px 40px 10px 40px / 30px 30px 30px 30px;
*/

在这里插入图片描述

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

border-radius: 20px 40px 10px 10px / 30px;
/*相当于：
左上角 20px 30px; 
右上角 40px 30px; 
右下角 10px 30px;
左下角 10px 30px;
border-radius: 20px 40px 10px 10px / 30px 30px 30px 30px;
*/

在这里插入图片描述

总结

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