您的位置:首页 > 教程笔记 > 前端笔记

CSS圆角样式属性写法

2023-12-25 15:05:50 前端笔记 216

CSS 圆角可以使用 border-radius 属性来实现。这个属性可以设置元素的四个角(上、右、下、左)的圆角半径,从而使元素看起来像是有圆角的矩形。

例如,以下代码将设置一个圆角的 div 元素:

div {
 border-radius: 10px;
 background-color: lightblue;
 padding: 20px;
 width: 200px;
 height: 100px;
}

在这个例子中,border-radius 的值设置为 10px,这意味着四个角的圆角半径都是 10px。

您还可以为每个角设置不同的圆角半径,例如:

div {
 border-radius: 10px 20px 30px 40px;
 background-color: lightblue;
 padding: 20px;
 width: 200px;
 height: 100px;
}

在这个例子中,前两个值(10px 和 20px)设置的是左上角的圆角半径,后两个值(30px 和 40px)设置的是右下角的圆角半径。

请注意,border-radius 属性只能应用于具有边框的元素,例如 div、p、h1、h2、h3、h4、h5、h6、table、tr、td、th 等。

相关推荐