css 制作圆角

圆角的基本实现方法

使用 border-radius 属性可以轻松为元素添加圆角效果。该属性接受长度值（如像素、百分比等），控制圆角的弧度大小。

.box {
  border-radius: 10px;
}

单独控制每个角的圆角

通过分别设置四个角的半径，可以实现不对称的圆角效果。属性值的顺序为：左上、右上、右下、左下。

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

使用百分比实现椭圆圆角

百分比值基于元素的尺寸计算，适合创建非对称或椭圆形的圆角。水平半径和垂直半径可以用 / 分隔。

.box {
  border-radius: 50% / 20%;
}

圆角的高级应用

结合 background-clip 和 overflow 属性，圆角可以用于图片、渐变背景等复杂场景。

.image-container {
  border-radius: 15px;
  overflow: hidden;
}

响应式圆角设计

使用 CSS 变量或媒体查询，可以根据屏幕尺寸动态调整圆角大小。

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

@media (min-width: 768px) {
  :root {
    --corner-radius: 12px;
  }
}

浏览器兼容性注意事项

虽然现代浏览器普遍支持 border-radius，但某些旧版本可能需要前缀。通常无需特别处理，除非需要支持非常古老的系统。

.legacy-box {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}