border-radius
属性用于设置 HTML 元素的圆角,其可接受的值包括:
border-radius: length;
:设置四个角的圆角半径都相同,其中 length
表示圆角的半径长度,可以用像素、百分比等单位进行设置。border-radius: length1 / length2;
:设置两个相邻角的圆角半径,其中 length1
表示水平方向的圆角半径,length2
表示垂直方向的圆角半径。border-radius: length1 length2 length3 length4;
:分别设置四个角的圆角半径,其中 length1
表示左上角的圆角半径,length2
表示右上角的圆角半径,length3
表示右下角的圆角半径,length4
表示左下角的圆角半径。需要注意的是,border-radius
属性可以单独应用于每个角,也可以同时应用于四个角。如果设置的值超过了元素的边框宽度,那么圆角将会被裁剪。
示例代码:
/* 设置所有角的圆角半径为 10px */
border-radius: 10px;
/* 设置水平方向上的圆角半径为 10px,垂直方向上的圆角半径为 20px */
border-radius: 10px / 20px;
/* 分别设置四个角的圆角半径 */
border-radius: 10px 20px 30px 40px;
更多关于 border-radius
的用法和注意事项,可以参考 MDN 文档。