css制作圆角矩形

使用 border-radius 属性

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

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

单独设置每个角的圆角

可以通过分别设置四个角的半径来定制圆角效果。顺序为左上、右上、右下、左下。

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

使用百分比值

border-radius 也支持百分比值，相对于元素的宽度和高度计算圆角半径。

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

椭圆角效果

通过使用两个值（水平半径和垂直半径），可以创建椭圆形的圆角效果。

.elliptical-rounded {
  border-radius: 50px / 20px;
}

结合其他属性增强效果

圆角矩形通常需要结合背景色、边框等属性以达到更好的视觉效果。

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

浏览器兼容性

border-radius 在现代浏览器中支持良好，但旧版浏览器可能需要厂商前缀。

.legacy-support {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}