css制作圆角

使用 border-radius 属性

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

.element {
  border-radius: 10px;
}

设置不同圆角半径

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

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

使用百分比值

border-radius 也可以使用百分比值，相对于元素的尺寸计算圆角半径。

.element {
  border-radius: 50%;
}

椭圆圆角

通过使用斜杠分隔两组值，可以创建椭圆形的圆角。第一组值定义水平半径，第二组值定义垂直半径。

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

单独设置每个角

CSS 提供了单独设置每个角的属性，分别为 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;
}

圆角边框与背景裁剪

当使用圆角时，可能需要设置 background-clip 属性以确保背景不会溢出到边框区域。

.element {
  border-radius: 10px;
  background-clip: padding-box;
}

浏览器兼容性

现代浏览器普遍支持 border-radius 属性。对于旧版浏览器，可能需要使用供应商前缀。

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

圆角按钮示例

以下是一个圆角按钮的完整示例：

.button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
}