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
的值即可。
粉丝
0
关注
0
收藏
0