空心圆环的本质是利用CSS边框渲染特性：当元素宽高为0且设置等宽边框+border-radius:50%时，四条实色边框闭合成正圆环；必须保证width===height才能形成正圆，否则为椭圆；零宽法下外径=2×border-width，内径=0，真正空心需结合box-sizing:border-box与正方形内容区。
用 border 和 transparent 画空心圆环的本质是什么
空心圆环不是“画一个圆再挖个洞”，而是利用 CSS 的边框渲染特性：当元素宽高为 0，但设置了足够大的 border-width，且仅保留单侧（比如 border-top）为实色、其余三边为 transparent 时，浏览器会把那条彩色边框渲染成一段圆弧；四条等宽边框全设为实色+border-radius: 50%，就自然闭合成完整圆环。
border-radius: 50% 必须配合正方形尺寸才生效
如果容器的 width 和 height 不相等，border-radius: 50% 会生成椭圆环而非正圆环——这是最常见的失真原因。
- 确保
width===height（例如都设为100px） - 不要依赖父容器缩放或 flex 自适应来“凑”正方形，必须显式设置
- 若需响应式，用
aspect-ratio: 1（现代浏览器支持）或padding-bottom: 100%+ 绝对定位模拟
控制圆环粗细与直径的关键参数组合
圆环外径 = width + 2 * border-width；内径 = width（前提是 width > 0）；但更常用的是“零宽法”——把 width 和 height 设为 0，只靠 border 构成图形。
- 零宽法示例：
.ring {<br> width: 0;<br> height: 0;<br> border: 10px solid #3498db;<br> border-color: #3498db transparent transparent transparent;<br> border-radius: 50%;<br>}→ 得到 20px 外径、10px 粗的四分之一圆弧 - 要闭合为完整空心环：把
border-color改为#3498db #3498db #3498db #3498db或直接用border: 10px solid #3498db - 此时外径 =
2 * border-width= 20px；内径 = 0 —— 实际是实心圆点。真正空心需引入box-sizing: border-box+ 正方形内容区
透明边框在不同浏览器中的渲染一致性
transparent 在所有现代浏览器中行为一致，但旧版 IE（≤IE11）对 border-color: transparent 支持不完善，可能渲染为黑色或忽略。若需兼容 IE，改用 rgba(0,0,0,0) 更稳妥。
立即学习“前端免费学习笔记（深入）”；
- 避免混用
transparent和rgba()在同一声明中（如border-color: red transparent rgba(0,0,0,0) blue），部分引擎解析顺序异常 - 动画时慎用
border-color过渡：Safari 对transparent到颜色的过渡可能跳变，建议统一用rgba()起止值 - 如果圆环用于加载指示器，注意
border-style: solid是唯一能形成连续环的样式；dashed或dotted会断开
真正难的不是画出来，而是让它的尺寸、颜色、动效在各种缩放和 DPR 下都稳定——这时候你会发现，border 的像素级渲染边界比想象中更敏感。
