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%;
}

椭圆角效果

通过使用斜杠分隔两个值，可以分别设置水平和垂直半径，从而创建椭圆角效果。

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

结合其他 CSS 属性

圆角矩形通常需要配合其他属性（如 background、border）来实现更丰富的视觉效果。

.rounded-rectangle {
  border-radius: 15px;
  background: #3498db;
  border: 2px solid #2980b9;
  padding: 20px;
  color: white;
}

兼容性注意事项

border-radius 在现代浏览器中支持良好，但在旧版本浏览器（如 IE8 及以下）中可能无效。可以通过添加浏览器前缀来增强兼容性。

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

使用 CSS 变量

为了便于维护，可以使用 CSS 变量定义圆角半径。

:root {
  --border-radius: 8px;
}

.rounded-rectangle {
  border-radius: var(--border-radius);
}