在CSS中,我们可以使用多种方式绘制圆形,其中一种方法是使用 ::before 和 ::after 伪元素画两个层叠的空心圆。这种方法可以轻松地实现圆形进度条等设计效果。.circle { posit
在CSS中,我们可以使用多种方式绘制圆形,其中一种方法是使用 ::before
和 ::after
伪元素画两个层叠的空心圆。这种方法可以轻松地实现圆形进度条等设计效果。
.circle { position: relative; width: 80px; height: 80px; border-radius: 50%; border: 6px solid #ccc; } .circle::before, .circle::after { content: ""; position: absolute; top: -6px; left: -6px; right: -6px; bottom: -6px; border-radius: 50%; border: 6px solid #f00; } .circle::after { border-color: #0000ff; z-index: -1; }
首先我们创建一个 .circle
类,设置宽高和圆角半径为50%,然后添加一个宽度为6像素、颜色为灰色的边框,这是圆的外边框。接下来,我们使用 ::before
和 ::after
伪元素,为了展现两个空心圆环。这两个空心圆的半径比父容器小6像素,也就是外边框的宽度。使用 position: absolute
将它们定位到圆的中心,同时把宽度设置为父元素的宽度再减去12像素,实现空心效果。我们可以通过调整 border-color
属性来改变圆的颜色,也可以使用 z-index
属性来控制两个圆的叠放次序。
因为两个圆的位置重合,所以我们需要通过 z-index
属性来控制它们的叠放先后顺序。在上面的代码中,我们把里面的圆(也就是 ::after
元素)的 z-index
值设置为-1,让它显示在外面的圆的下面。这样我们就实现了两个层叠的空心圆了。
粉丝
0
关注
0
收藏
0