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;
}

简写属性

border-radius 是以下属性的简写：

• 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: 25px;
}

实际示例

以下是一个完整的示例，展示如何为一个按钮添加圆角：

.button {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

浏览器兼容性

border-radius 属性在现代浏览器中广泛支持，包括 Chrome、Firefox、Safari 和 Edge。对于旧版浏览器（如 IE8 及以下），可能需要使用厂商前缀或替代方案。