CSS3 圆角

CSS 边框圆角 (border-radius)

CSS border-radius 属性允许你为元素创建圆角。这是现代 UI 设计的基本技术，可以柔化锐利的边缘，创建圆形或椭圆形。

浏览器支持

border-radius 属性在所有现代浏览器中都得到完全支持。不再需要厂商前缀。

使用 border-radius

你可以将 border-radius 应用于任何元素，无论它是否有可见的边框、背景色或背景图片。圆角效果会应用到元素的外部边框边缘。

基本示例：

/* 1. 带有背景色的圆角 */
#rcorners-bg {
  border-radius: 15px; /* 对所有角应用 15px 的圆角半径 */
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 100px;
}

/* 2. 带有可见边框的圆角 */
#rcorners-border {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px;
  width: 200px;
  height: 100px;
}

/* 3. 带有背景图片的圆角 */
#rcorners-img {
  border-radius: 10px;
  background: url('path/to/your/image.jpg'); /* 确保路径正确 */
  background-position: center center;
  background-size: cover;
  padding: 20px;
  width: 200px;
  height: 100px;
  color: white; /* 示例文字颜色 */
  text-align: center;
}

指定单独的角

border-radius 属性是一个简写属性。你可以提供一个、两个、三个或四个值来单独控制每个角：

• 一个值：border-radius: 15px; - 应用于所有四个角。
• 两个值：border-radius: 15px 50px; - 第一个值应用于左上角和右下角。第二个值应用于右上角和左下角。
• 三个值：border-radius: 15px 50px 30px; - 第一个值 (15px) 应用于左上角。第二个值 (50px) 应用于右上角和左下角。第三个值 (30px) 应用于右下角。
• 四个值：border-radius: 15px 50px 30px 5px; - 按顺时针方向应用：左上角 (15px)、右上角 (50px)、右下角 (30px)、左下角 (5px)。

四个值的示例：

#rcorners-individual {
  /* 左上=15px, 右上=50px, 右下=30px, 左下=5px */
  border-radius: 15px 50px 30px 5px;
  background: orange;
  padding: 20px;
  width: 200px;
  height: 100px;
}

创建椭圆形角：

你可以通过为任何角设置提供两个用斜杠（/）分隔的值来创建椭圆形角。第一个值代表水平半径，第二个值代表垂直半径。

#rcorners-ellipse1 {
  /* 所有角：水平半径 50px，垂直半径 15px */
  border-radius: 50px / 15px;
  background: lightcoral;
  padding: 20px;
  width: 200px;
  height: 100px;
}

#rcorners-ellipse2 {
  /* 所有角：水平半径 15px，垂直半径 50px */
  border-radius: 15px / 50px;
  background: lightseagreen;
  padding: 20px;
  width: 200px;
  height: 100px;
}

创建圆形：

一个常见的用例是将一个正方形元素的 border-radius 设置为 50% 来创建一个完美的圆形。

#circle {
  border-radius: 50%; /* 如果宽度 == 高度，则形成圆形 */
  background: dodgerblue;
  width: 150px;
  height: 150px;
}

简写属性与长手属性

尽管 border-radius 简写属性很常用，你也可以使用长手属性单独设置每个角：

属性	描述
border-top-left-radius	定义左上角的圆角。
border-top-right-radius	定义右上角的圆角。
border-bottom-right-radius	定义右下角的圆角。
border-bottom-left-radius	定义左下角的圆角。
border-radius	设置所有四个角半径的简写属性。

使用长手属性的示例：

.custom-corners {
  background: gold;
  padding: 20px;
  width: 200px;
  height: 100px;
  border-top-left-radius: 40px 20px; /* 椭圆形的左上角 */
  border-bottom-right-radius: 30px; /* 圆形的右下角 */
  /* 其他角保持锐利 */
}

Learn more on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius