当前位置：首页 > CSS

css制作圆角

2026-02-12 22:38:13CSS

使用 border-radius 属性

在 CSS 中，border-radius 属性是制作圆角的主要方法。通过设置该属性的值，可以控制元素的圆角大小。例如：

.box {
  border-radius: 10px;
}

这个例子会将 .box 元素的四个角都设置为 10 像素的圆角。

分别设置四个角的圆角

如果需要为元素的四个角分别设置不同的圆角值，可以使用以下方式：

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

这里的四个值分别对应左上、右上、右下、左下的圆角半径。

使用百分比值

border-radius 也可以使用百分比值，这对于创建圆形或椭圆形特别有用：

.circle {
  border-radius: 50%;
}

这个例子会将元素变成一个完美的圆形（前提是元素的宽度和高度相等）。

单独设置某个角的圆角

如果需要单独设置某个角的圆角，可以使用以下属性：

.box {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 40px;
}

椭圆形的圆角

border-radius 还可以接受两个值，分别表示水平半径和垂直半径，用于创建椭圆形圆角：

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

这个例子会创建一个水平半径为 50%、垂直半径为 20% 的椭圆形圆角。

浏览器兼容性

border-radius 在现代浏览器中得到了广泛支持，但在一些旧版浏览器（如 IE8 及以下版本）中可能无法正常工作。如果需要兼容旧版浏览器，可以考虑使用 JavaScript 或图片替代方案。

实际应用示例

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

<!DOCTYPE html>
<html>
<head>
  <style>
    .button {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button class="button">圆角按钮</button>
</body>
</html>

css制作圆角