【CSS】深入了解圆角属性border-radius

border-radius 是 CSS 中的一个非常有用的属性，它允许你创建具有圆角边框的元素。这个属性可以应用于一个元素的四个角，或者分别应用于每个角。下面我们将深入了解 border-radius 的使用方法和一些高级技巧。

基本用法

你可以通过为 border-radius 指定一个值来设置所有四个角的圆角半径。这个值可以是像素值（px）、百分比（%）或 em 等相对单位。

.box {
  border: 2px solid #000;
  border-radius: 10px; /* 所有四个角都有 10px 的圆角 */
}

分别设置每个角

你也可以分别设置每个角的圆角半径。这可以通过使用斜杠（/）分隔的值来实现，这些值分别对应于左上角、右上角、右下角和左下角。

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

或者，你可以使用两个值来分别设置对角线的角。第一个值应用于左上角和右下角，第二个值应用于右上角和左下角。

.box {
  border: 2px solid #000;
  border-radius: 10px 20px; /* 左上角和右下角10px, 右上角和左下角20px */
}

你还可以使用四个值来分别设置每个角，但是这次它们是按顺时针方向（左上角、右上角、右下角、左下角）排列的。

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

百分比值

当使用百分比值时，圆角的大小是相对于元素宽度的。例如，50% 的 border-radius 将创建一个半圆效果。

.box {
  width: 200px;
  height: 100px;
  border: 2px solid #000;
  border-radius: 50%; /* 创建一个宽度为 200px 的半圆 */
}

不等边框半径

border-radius 也可以用于创建不等边框半径的效果，这在一些复杂的图形设计中非常有用。你可以为每个角的水平和垂直半径分别设置值，这通过在每个角的值后添加斜杠和第二个值来实现。

.box {
  border: 2px solid #000;
  border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px;
  /* 左上角：水平10px, 垂直50px
     右上角：水平20px, 垂直60px
     右下角：水平30px, 垂直70px
     左下角：水平40px, 垂直80px */
}

浏览器兼容性

大多数现代浏览器都支持 border-radius 属性，包括 Chrome、Firefox、Safari、Edge 和 Internet Explorer 9 及以上版本。然而，对于需要支持较旧浏览器的项目，你可能需要使用供应商前缀（如 -moz-, -webkit- 等）来确保兼容性。

实际应用

border-radius 在许多网站和应用程序中都有广泛应用，从简单的按钮和输入框到复杂的图形和图标。通过巧妙地使用 border-radius，你可以创建出既美观又实用的用户界面。