css制作圆角

使用 border-radius 属性

在 CSS 中，border-radius 是制作圆角的主要属性。通过设置 border-radius 的值，可以控制元素的圆角大小。值可以是像素（px）、百分比（%）或其他长度单位。

.element {
  border-radius: 10px;
}

设置不同圆角大小

可以为元素的四个角分别设置不同的圆角大小。值的顺序是左上、右上、右下、左下。

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

使用百分比实现圆形

将 border-radius 设置为 50%，可以将元素变为圆形。前提是元素的宽度和高度相等。

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

椭圆效果

如果元素的宽度和高度不相等，设置 border-radius 为 50% 会生成椭圆效果。

.oval {
  width: 150px;
  height: 100px;
  border-radius: 50%;
}

单独控制每个角

可以通过以下属性单独控制每个角的圆角大小：

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

.element {
  border-top-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

使用斜杠指定水平和垂直半径

border-radius 还支持用斜杠（/）分隔水平和垂直半径的值，用于创建非对称圆角。

.element {
  border-radius: 20px / 10px;
}

响应式圆角

结合 CSS 变量或媒体查询，可以实现响应式圆角效果。

:root {
  --radius: 5px;
}

.element {
  border-radius: var(--radius);
}

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

浏览器兼容性

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

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