css做圆环 镂空 |css定位技术的原理及应用

/* CSS代码 */
.container {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #ccc;
}
.container:before {
content: "";
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border-radius: 50%;
background-color: #fff;
z-index: 1;
}
.container:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
border: 10px solid #ccc;
z-index: 2;
}

上述代码中，首先通过一个div元素容器来包含大家的圆环。容器设置为50%的圆角使其变成圆形，背景色设置为灰色。

接着，使用伪元素:before来构造出内半圆环，使用border-radius设置为50%构造出半圆，使用content属性生成内容，将其设置为一个空白字符，由于圆环直径比容器直径小20像素，大家将top、left、right、bottom属性都设置为10px。

最后，使用伪元素:after来构造圆环的厚度。设置border属性，将圆环的颜色设置为灰色，z-index属性设置为2，使其处于容器内半圆环的上方。

通过这样的方式，大家就可以使用CSS构造出一个漂亮的圆环镂空效果，代码简单易懂，非常实用。