[分享]css两边变成圆角

CSS可以让我们很容易地将一个按钮或者一个容器的一个或两个角变成圆角，但是有的时候我们希望同时将左边和右边的两个角都变成圆角，该怎么做呢？我们可以使用伪元素::before和::after来实现这个效...

CSS可以让我们很容易地将一个按钮或者一个容器的一个或两个角变成圆角，但是有的时候我们希望同时将左边和右边的两个角都变成圆角，该怎么做呢？

我们可以使用伪元素::before和::after来实现这个效果。首先我们需要给容器加上一个position: relative的属性，这样我们才能给::before和::after定位。

然后我们分别给::before和::after加上以下样式：

.container::before,
.container::after {
  content: "";
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
}

.container::before {
  top: 0;
  left: -10px;
  background-color: #f00;
}

.container::after {
  top: 0;
  right: -10px;
  background-color: #0f0;
} 

我们使用content: ""来创建一个空的元素，然后将其设置为display: block以便我们可以给它设置宽高和定位。我们给它们都设置了width: 20px和height: 20px，然后将border-radius设置为宽或高的一半，就可以得到圆的形状。

在::before中，我们将元素定位到容器的左上角，然后将left设置为负的圆的半径，这样元素就会超出容器的左边界。在::after中，我们将元素定位到容器的右上角，然后将right设置为负的圆的半径，这样元素就会超出容器的右边界。

这样就可以实现左右两边变成圆角的效果了。如果需要同时让上边和下边变成圆角，可以使用类似的方法，只需要调整top和bottom的值即可。