css圆角边框怎么设置

作者：续写丶未来式发布日期:2025-07-15 浏览:21

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

/* 基本语法 */
border-radius: 10px; /* 所有四个角都设置为10px的圆角 */

/* 分别设置每个角的圆角半径 */
border-top-left-radius: 10px;    /* 左上角 */
border-top-right-radius: 10px;   /* 右上角 */
border-bottom-left-radius: 10px; /* 左下角 */
border-bottom-right-radius: 10px;/* 右下角 */

/* 示例：一个带有圆角边框的盒子 */
.box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    border: 2px solid blue;
    border-radius: 15px; /* 圆角半径为15px */
}

解释说明：

border-radius 属性用于设置元素的圆角边框。
可以通过单独设置每个角的圆角半径来实现不同的效果，例如只让某些角变圆。
在示例中，.box 类定义了一个宽度为200px、高度为100px的矩形盒子，并设置了15px的圆角边框。

上一篇：css 渐变边框

下一篇：css 平行四边形