CSS 实现圆角矩形的方法

在网页设计中，圆角矩形是一种常见且美观的图形元素，它能为页面增添柔和与现代感。CSS 提供了多种方式来创建圆角矩形，以下将详细介绍。

最基本且常用的方法是使用 border-radius 属性。该属性用于设置元素四个角的圆角半径。它可以接受一个、两个、三个或四个值。当只设置一个值时，四个角都会应用相同的圆角半径。例如：

.rectangle {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    border-radius: 10px;
}

上述代码会创建一个宽度为 200 像素、高度为 100 像素的浅蓝色矩形，四个角的圆角半径均为 10 像素。

如果设置两个值，第一个值应用于左上角和右下角，第二个值应用于右上角和左下角。例如：

.rectangle {
    width: 200px;
    height: 100px;
    background-color: lightcoral;
    border-radius: 15px 5px;
}

若想单独控制每个角的圆角半径，可以使用四个值，顺序为左上角、右上角、右下角、左下角。

.rectangle {
    width: 200px;
    height: 100px;
    background-color: lightgreen;
    border-radius: 5px 10px 15px 20px;
}

除了使用固定的像素值，border-radius 也可以使用百分比。百分比值是相对于元素的宽度和高度来计算的。比如：

.rectangle {
    width: 200px;
    height: 100px;
    background-color: lightpink;
    border-radius: 50%;
}

此时会创建一个椭圆形，因为宽度和高度不同，50% 的圆角半径会使形状变为椭圆。若宽度和高度相同，使用 50% 的 border-radius 就能创建出一个圆形。

在实际应用中，还可以结合其他 CSS 属性，如 box-shadow 来为圆角矩形添加阴影效果，增强其立体感；或者与 transition 属性配合，实现圆角矩形在鼠标悬停等交互时的平滑过渡效果，提升用户体验。

通过 border-radius 属性的灵活运用，开发者能够轻松在 CSS 中创建出各种符合设计需求的圆角矩形，为网页界面增添独特魅力。