空心圆制作 css
使用CSS制作空心圆的方法
方法一：使用border和border-radius
通过设置元素的宽度和高度相等，并添加border-radius: 50%将其变为圆形。通过调整border属性控制边框的粗细和颜色，同时将background设为透明或与背景色一致。
.hollow-circle {
width: 100px;
height: 100px;
border: 5px solid #000;
border-radius: 50%;
background: transparent;
}方法二：使用伪元素和transform
通过伪元素（如::before或::after）创建一个稍小的圆形，覆盖在父元素圆形上，形成空心效果。
.hollow-circle {
position: relative;
width: 100px;
height: 100px;
background: #000;
border-radius: 50%;
}
.hollow-circle::after {
content: "";
position: absolute;
top: 10px;
left: 10px;
width: 80px;
height: 80px;
background: #fff;
border-radius: 50%;
}方法三：使用box-shadow
通过box-shadow的inset属性模拟空心效果，适合需要复杂阴影的场景。
.hollow-circle {
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: inset 0 0 0 5px #000;
}方法四：使用SVG内联
直接使用SVG代码嵌入HTML，通过stroke属性控制边框颜色和粗细，fill设为透明。
<svg width="100" height="100">
<circle cx="50" cy="50" r="45" stroke="#000" stroke-width="5" fill="none" />
</svg>注意事项
- 方法一最简单，但边框宽度会占用元素的实际尺寸（需调整
width/height）。 - 方法二适合需要动态控制空心部分大小的场景。
- SVG方法兼容性最佳，且支持更复杂的图形效果。
根据具体需求选择合适的方法。
