在网页设计中，使用 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: lightgreen;
    border-radius: 20px 10px;
}

这样就得到了一个有着不同圆角组合的矩形。

设置三个值时，第一个值应用于左上角，第二个值应用于右上角和左下角，第三个值应用于右下角。而四个值的情况则分别对应左上角、右上角、右下角和左下角。

除了设置统一的圆角半径，还可以分别对每个角进行单独设置。使用 border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius 这四个属性。例如：

.rectangle {
    width: 200px;
    height: 100px;
    background-color: lightcoral;
    border-top-left-radius: 5px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 35px;
}

能创建出每个角都有不同圆角效果的矩形。

另外，在实际应用中，还可以结合其他 CSS 属性，如 box-shadow（添加阴影效果）、opacity（设置透明度）等，来进一步美化圆角矩形，让其在页面中更加突出。掌握这些用 CSS 创建圆角矩形的方法，能让我们在网页设计时更加得心应手，打造出独具魅力的页面布局和视觉效果。无论是简单的按钮，还是复杂的容器，圆角矩形都能为网页增添一抹柔和与精致。