CSS圆角

CSS圆角允许你为元素的边框添加圆角效果，使元素的边缘不再是尖锐的直角，而是平滑的曲线。圆角可以应用于任何具有边框的元素，增强页面的视觉美观性。

基础语法

圆角通过border-radius属性实现，它可以接受一个或多个值来控制元素四个角的圆角程度。

css

.element {
  border-radius: 10px;
}

基本用法

统一圆角

当只提供一个值时，它将应用于元素的四个角。

css

.element {
  border-radius: 10px;
}

分别设置四个角

可以提供1-4个值，分别对应不同的角：

css

/* 1个值：四个角都使用相同的圆角 */
.element {
  border-radius: 10px;
}

/* 2个值：第1个值应用于左上角和右下角，第2个值应用于右上角和左下角 */
.element {
  border-radius: 10px 20px;
}

/* 3个值：第1个值应用于左上角，第2个值应用于右上角和左下角，第3个值应用于右下角 */
.element {
  border-radius: 10px 20px 30px;
}

/* 4个值：分别应用于左上角、右上角、右下角、左下角（顺时针方向） */
.element {
  border-radius: 10px 20px 30px 40px;
}

椭圆圆角

可以使用斜杠(/)来分别指定水平和垂直半径，创建椭圆圆角。

css

/* 水平半径10px，垂直半径20px */
.element {
  border-radius: 10px / 20px;
}

/* 分别设置四个角的水平和垂直半径 */
.element {
  border-radius: 10px 20px 30px 40px / 20px 30px 40px 50px;
}

单个角的圆角

可以使用以下属性分别设置单个角的圆角：

border-top-left-radius：左上角
border-top-right-radius：右上角
border-bottom-right-radius：右下角
border-bottom-left-radius：左下角

css

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

高级用法

圆形元素

将元素的border-radius设置为元素宽度的一半，可以创建圆形元素。

css

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: blue;
}

胶囊形状

将元素的border-radius设置为元素高度的一半，可以创建胶囊形状。

css

.capsule {
  width: 300px;
  height: 100px;
  border-radius: 50px; /* 高度的一半 */
  background-color: red;
}

复杂的圆角形状

通过组合不同的圆角值，可以创建复杂的形状。

css

.custom-shape {
  width: 200px;
  height: 200px;
  border-top-left-radius: 50%;
  border-top-right-radius: 10%;
  border-bottom-right-radius: 30%;
  border-bottom-left-radius: 70%;
  background-color: green;
}

与其他属性的配合

边框和背景

圆角会同时影响元素的边框和背景。

css

.element {
  border: 2px solid red;
  border-radius: 10px;
  background-color: blue;
}

阴影

圆角会影响元素的阴影效果，阴影会跟随元素的圆角形状。

css

.element {
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

图片

可以为图片添加圆角效果，创建圆形图片或其他形状的图片。

css

.round-image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
}

浏览器兼容性

border-radius属性在所有现代浏览器中都有很好的支持：

Chrome 4+
Firefox 4+
Safari 3.1+
IE 9+
Edge 12+

对于旧版本浏览器的支持，可以添加浏览器前缀：

css

.element {
  border-radius: 10px;
  -webkit-border-radius: 10px; /* Safari和Chrome */
  -moz-border-radius: 10px; /* Firefox */
}

最佳实践

使用相对单位（如%）来创建响应式的圆角效果
对于圆形元素，确保元素的宽高相等
考虑使用CSS变量来统一管理圆角值，便于维护

css

:root {
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-full: 50%;
}

.element {
  border-radius: var(--border-radius-md);
}

.circle {
  border-radius: var(--border-radius-full);
}