css制作出圆角

使用 border-radius 属性制作圆角

通过 border-radius 属性可以为元素的四个角设置圆角效果。该属性接受长度值（如 px、em、%）或百分比，百分比基于元素的宽度和高度计算。

.box {
  border-radius: 10px; /* 四个角均为 10px 圆角 */
}

单独设置每个角的圆角

通过扩展属性可以分别设置四个角的圆角半径：

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

或使用简写 border-radius，按顺时针顺序（左上、右上、右下、左下）设置：

.box {
  border-radius: 10px 20px 30px 40px; /* 左上 10px, 右上 20px, 右下 30px, 左下 40px */
}

椭圆状圆角

通过斜杠 / 分隔水平和垂直半径，可以创建椭圆形圆角：

.box {
  border-radius: 50% / 20%; /* 水平半径 50%，垂直半径 20% */
}

圆角的应用场景

• 按钮：

  .button {
    border-radius: 5px;
  }

• 圆形头像：

  .avatar {
    border-radius: 50%;
  }

• 卡片组件：

  .card {
    border-radius: 8px;
  }

注意事项

• 圆角效果不会裁剪内容或背景图像，需配合 overflow: hidden 实现裁剪。
• 在旧版浏览器（如 IE8 及以下）不支持 border-radius，需使用图片或 JavaScript 替代方案。