css做出一个空心圆 |css在同一行显示

.circle {
width: 100px;
height: 100px;
border-radius: 50%;
border: 5px solid black;
box-shadow: inset 0 0 0 40px white;
}

上述代码中，大家先使用border-radius属性将正方形变成一个圆形。然后使用border属性设置边框。其中，5px是边框的宽度，black是边框的颜色。接着，大家使用box-shadow属性来实现空心圆。其中，inset将阴影内嵌到元素中，0 0是阴影的偏移量，0是阴影的模糊度，40px是阴影的扩张程度，white是阴影的颜色。

最终，大家就可以得到一个空心圆的效果了：