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 文档。