CSS | 边界半径属性

CSS边界半径属性指定元素的边框角落的半径大小。

语法

border-radius: length [% length] [length] [% / length [% length]][/ length [% length]];

其中：

• length：指定无单位数值的长度值。例如，50px，1em等。
• %：指定相对于父元素宽度的百分比值。例如，50%。
• /：用于分隔水平方向和垂直方向的半径值。
• 第一个值：指定左上角和右下角的半径大小。
• 第二个值：指定右上角和左下角的半径大小。

使用方法

border-radius: 30px;
border-radius: 10% / 20px;
border-radius: 50% 50% 0 0;
border-radius: 0 0 50% 50%;
border-radius: 50% / 20%;

示例

圆形的按钮

.btn {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 100px;
  font-size: 20px;
}

圆角矩形的框框

.box {
  width: 200px;
  height: 100px;
  background-color: #007bff;
  color: #fff;
  border-radius: 10px;
  text-align: center;
  line-height: 100px;
  font-size: 20px;
}

不规则标签

.tag {
  width: 140px;
  height: 60px;
  background-color: #007bff;
  color: #fff;
  border-radius: 60% / 40% 40% 60% 60%;
  text-align: center;
  line-height: 60px;
  font-size: 20px;
}

总结

CSS边界半径属性可以创建许多不同形状的元素。给元素添加合适的边界半径，可以增加网页设计的美感和可读性。