css设置四个边框圆角

作者：我视你如狗ㄟ发布日期:2026-02-21 浏览:78

/* 设置四个边框圆角的示例代码 */

/* 使用 border-radius 属性可以设置元素的四个角为圆角 */
/* 语法：border-radius: <length>|<percentage> */
/* 可以单独设置每个角的圆角半径，也可以统一设置所有角的圆角半径 */

/* 统一设置所有四个角的圆角半径 */
.example {
    border-radius: 10px;
}

/* 分别设置四个角的圆角半径 (顺时针顺序: 左上, 右上, 右下, 左下) */
.example-specific {
    border-radius: 10px 20px 30px 40px;
}

/* 也可以使用简写形式来分别设置水平和垂直方向的圆角半径 */
.example-horizontal-vertical {
    border-radius: 10px / 20px;
}

解释说明：

border-radius 属性用于设置元素的圆角。
可以通过一个值统一设置所有四个角的圆角半径。
也可以分别为每个角设置不同的圆角半径，按照左上、右上、右下、左下的顺序。
还可以通过斜杠分隔的形式分别设置水平和垂直方向的圆角半径。

上一篇：jquery 设置css

下一篇：css超过宽度自动换行