CSS中可以通过border-radius属性让一个元素的四个角变得圆润。不过如果我们需要给圆润的四个角添加线条,该怎么办呢?下面就来介绍一种简单的方法:.box { border-radius: 1
CSS中可以通过border-radius属性让一个元素的四个角变得圆润。不过如果我们需要给圆润的四个角添加线条,该怎么办呢?下面就来介绍一种简单的方法:
.box { border-radius: 10px; border: 2px solid #ccc; overflow: hidden; } .box:before, .box:after { content: '; position: absolute; width: 10px; height: 10px; background-color: #ccc; z-index: -1; } .box:before { top: -2px; left: -2px; border-top-left-radius: 8px; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .box:after { bottom: -2px; right: -2px; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 8px; }
首先,在要添加线条的元素上添加一个定宽定高、无背景色的伪元素。这里使用了:before和:after,因为我们需要在元素的四个角都添加线条。然后,将伪元素的z-index设为-1,使其处于元素下方。
接下来,需要为:before和:after分别设置位置和圆角半径。以:before为例,我们需要将它移动到元素左上角,因此设置top和left的值为-2px。而圆角半径则需要将左上角的设为8px,将其余三个角的半径设为0。
最后,将:after移动到元素右下角,设置bottom和right的值为-2px。同时将它的右下角圆角半径设为8px,其余三个角的半径设为0。
这样就可以让一个元素的圆润角上添加线条了。
粉丝
0
关注
0
收藏
0