CSS的圆角

在CSS中，我们可以使用 border-radius 属性实现元素的圆角效果。该属性可以为元素的四个角分别指定半径值，也可以用两个值指定水平和垂直半径值。此外，我们还可以使用 border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius 指定一个或多个角的半径值。

圆的实现

要实现全圆形，我们可以将 border-radius 值设为元素宽度/高度的一半。

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

圆角的实现

要实现圆角，我们只需要指定相应角的半径值即可。例如，下面的代码实现了左上和右下的圆角。

.rounded {
  width: 100px;
  height: 100px;
  border-radius: 10px 0 0 10px;
  background-color: green;
}

不同角的圆角实现

除了使用 border-radius 属性，我们还可以使用 border-*-radius 属性单独指定一个或多个角的半径值。下面的代码实现了左下和右上的圆角。

.rounded-corner {
  width: 100px;
  height: 100px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: red;
}

以上就是 CSS 圆角的实现方式。对于不同的情况，我们可以选择不同的实现方式来实现圆角效果。