css制作圆角矩形

使用 border-radius 属性

在 CSS 中，border-radius 属性是制作圆角矩形的主要方法。该属性可以接受一个或多个值，用于定义矩形的四个角的圆角半径。

.rounded-rectangle {
  border-radius: 10px;
}

设置不同圆角半径

可以为矩形的每个角单独设置不同的圆角半径。值的顺序为左上、右上、右下、左下。

.rounded-rectangle {
  border-radius: 10px 20px 30px 40px;
}

使用百分比值

border-radius 也可以使用百分比值，相对于元素的宽度和高度计算圆角半径。这对于创建椭圆形或圆形特别有用。

.rounded-rectangle {
  border-radius: 50%;
}

单独控制每个角

CSS 提供了单独控制每个角的属性，分别是 border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius。

.rounded-rectangle {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 40px;
}

椭圆形状的圆角

通过使用两个值，可以创建椭圆形的圆角。第一个值表示水平半径，第二个值表示垂直半径。

.rounded-rectangle {
  border-radius: 50px / 25px;
}

兼容性考虑

border-radius 属性在现代浏览器中广泛支持。对于旧版浏览器，可能需要使用厂商前缀（如 -webkit-border-radius 或 -moz-border-radius）。

.rounded-rectangle {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

结合其他样式

圆角矩形可以与其他 CSS 样式结合使用，如背景色、边框等，以增强视觉效果。

.rounded-rectangle {
  border-radius: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 20px;
}