空心圆制作 css
空心圆的制作方法
使用CSS制作空心圆可以通过边框（border）和圆角（border-radius）属性实现。以下是几种常见的方法：
方法一：使用边框和圆角
通过设置元素的宽度和高度相等，并添加border-radius: 50%将其变为圆形。然后通过边框属性（如border）实现空心效果。
.hollow-circle {
width: 100px;
height: 100px;
border-radius: 50%;
border: 5px solid #000;
background-color: transparent;
}方法二：使用伪元素
通过伪元素（如::before或::after）创建一个圆形，并为其添加边框。
.hollow-circle {
position: relative;
width: 100px;
height: 100px;
}
.hollow-circle::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 5px solid #000;
background-color: transparent;
}方法三：使用SVG
SVG是一种矢量图形格式，可以直接绘制空心圆。
<svg width="100" height="100">
<circle cx="50" cy="50" r="45" stroke="#000" stroke-width="5" fill="none" />
</svg>方法四：使用box-shadow
通过box-shadow属性模拟边框效果，但需要注意兼容性。
.hollow-circle {
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 0 0 0 5px #000;
background-color: transparent;
}注意事项
- 确保宽度和高度相等，否则会变成椭圆。
- 边框宽度（
border-width）可以根据需求调整。 - 使用
background-color: transparent确保内部透明。 - SVG方法适用于需要更多图形控制的情况。
