CSS如何创建带圆角的矩形框

CSS创建带圆角的矩形框

CSS可以用来创建带圆角的矩形框，其利用border-radius属性实现。border-radius属性可以使元素的边框圆角化，该属性可以接受一个或多个值，每个值表示一个圆角的大小。

.rectangle {
    width: 200px;
    height: 100px;
    border: 1px solid #000;
    border-radius: 10px;
}

上面的代码中，我们定义了一个名为rectangle的类，它有200px的宽度和100px的高度，边框为1px实线，border-radius属性设置为10px，这样就可以创建一个带有10px圆角的矩形框。

border-radius属性也可以接受多个值，每个值表示一个圆角的大小。如果接受多个值，则每个值的顺序为：

• 左上角圆角大小
• 右上角圆角大小
• 右下角圆角大小
• 左下角圆角大小

.rectangle {
    width: 200px;
    height: 100px;
    border: 1px solid #000;
    border-radius: 10px 20px 30px 40px;
}

上面的代码中，我们定义了一个名为rectangle的类，它有200px的宽度和100px的高度，边框为1px实线，border-radius属性设置为10px 20px 30px 40px，这样就可以创建一个带有不同大小圆角的矩形框。