css制作圆角矩形

使用 border-radius 属性

border-radius 是 CSS 中用于创建圆角的主要属性。可以通过设置一个或多个值来定义圆角的大小。

.rounded-box {
  border-radius: 10px; /* 四个角统一设置 */
}

单独设置不同圆角

可以为每个角单独设置不同的圆角值，顺序为：左上、右上、右下、左下。

.rounded-box {
  border-radius: 10px 5px 15px 20px; /* 左上 右上 右下 左下 */
}

使用百分比创建椭圆形状

border-radius 支持百分比值，可以创建圆形或椭圆形效果。

.circle {
  border-radius: 50%; /* 创建圆形 */
  width: 100px;
  height: 100px;
}

使用 border-top-left-radius 等单独属性

如果需要更精确控制某个角的圆角，可以使用单独属性。

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

结合 background 和 padding 优化视觉效果

圆角通常搭配背景色或内边距使用，使效果更自然。

.rounded-box {
  border-radius: 8px;
  background: #f0f0f0;
  padding: 12px;
}

兼容性注意事项

border-radius 在现代浏览器中广泛支持，但在旧版浏览器（如 IE8 及以下）可能无效。如需兼容，可使用 -moz-border-radius（Firefox 旧版）或 -webkit-border-radius（Chrome/Safari 旧版），但现代开发通常无需考虑。

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