css圆角属性

作者：菠蘿。d海发布日期:2026-02-08 浏览:38

/* 使用 border-radius 属性可以为元素添加圆角效果 */

/* 示例 1: 所有四个角都设置相同的圆角半径 */
.example1 {
    border-radius: 10px;
}

/* 示例 2: 分别设置每个角的圆角半径 */
.example2 {
    border-radius: 10px 20px 10px 20px; /* 上左 上右 下右 下左 */
}

/* 示例 3: 设置不同的水平和垂直半径 */
.example3 {
    border-radius: 10px / 20px; /* 水平半径 / 垂直半径 */
}

/* 示例 4: 创建一个圆形按钮 */
.example4 {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* 将元素变成圆形 */
}

解释说明：

border-radius 属性用于定义元素的边框圆角。
可以通过指定一个值来使所有四个角都具有相同的圆角半径。
也可以分别为每个角指定不同的圆角半径，顺序为：上左、上右、下右、下左。
如果需要创建一个圆形元素，可以将 border-radius 设置为 50%，同时确保元素的宽高相等。

上一篇：css超出省略号

下一篇：css隐藏滚动条但能滚动