纯 HTML/CSS 可实现静态圆形进度环，需用 SVG 的 <circle> 配合 stroke-dasharray 和 transform: rotate(-90) 精确控制起始点与进度长度，周长须手动计算并硬编码，无法真正动态更新。
怎么用 HTML + CSS 实现一个不依赖 JS 的静态进度环
纯 HTML/CSS 能做的进度环非常有限，<progress> 标签只支持线性进度条，无法画圆环。真正能“看起来像环”的方案，本质是用 SVG 的 <circle> + stroke-dasharray 模拟，但必须手动计算周长和偏移量。
常见错误现象：stroke-dasharray 值写死、r 改了但周长没重算、transform: rotate() 方向搞反导致进度从 12 点钟方向开始错位。
- 先定圆半径
r="40"，再算周长：circumference = 2 * Math.PI * r≈251.33（这个值必须硬编码进 CSS 或内联 style） - 进度 =
stroke-dasharray: [已用长度] [总长度]，比如 60% 进度就是stroke-dasharray="150.8 251.33" - 起始点默认在 3 点钟方向，加
transform="rotate(-90)"才让进度从 12 点钟开始，否则视觉上会“少转 90°”
display: grid 布局任务列表时，为什么项目高度不一致？
课程任务列表通常混有标题、描述、状态标签，grid 容器设了 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 后，单个卡片高度由内容撑开，列高不同会导致整体错位。
使用场景：需要横向平铺多列卡片，且每列顶部对齐、底部留白一致。
立即学习“前端免费学习笔记（深入）”；
- 给卡片容器加
align-items: start（避免默认 stretch 拉伸） - 所有卡片统一设
min-height（比如min-height: 160px），比内容平均高度略高即可 - 禁用
grid-auto-rows的隐式行高设置，改用显式grid-template-rows: auto配合justify-content: start
如何让进度环数值动态更新但不引入 JavaScript？
不能——这是关键判断。HTML/CSS 本身没有变量或计算能力，所谓“动态”只能靠服务端渲染（如 PHP 输出不同 style）、或构建时注入（如 Webpack + HTML 插件替换占位符）。浏览器里纯静态 HTML 无法响应用户操作或时间变化。
容易踩的坑：试图用 :checked + label 模拟开关控制进度，结果发现只能做 2~3 个固定档位，且无法读取真实数值；或滥用 @keyframes 动画假装“更新”，但动画播完就停住，不是真数据驱动。
- 如果只是展示固定课程完成率（如 73%），直接把数字和对应
stroke-dasharray值写死在 HTML 中最稳妥 - 若需用户点击切换任务状态，就必须用
JavaScript更新style.strokeDasharray和文本节点 - 注意：CSS 自定义属性（
--progress）不能直接用于stroke-dasharray计算，SVG 属性不支持 var() 函数
移动端下 SVG 进度环模糊或缩放失真怎么办？
根本原因是 SVG 渲染依赖视口单位和像素密度，viewBox 设得不严谨时，iOS Safari 会插值缩放导致边缘发虚，安卓部分 WebView 则可能忽略 width/height 强制按 viewBox 比例拉伸。
性能影响：未设 width 和 height 的 SVG 在页面重排时可能触发多次 layout 计算。
- 必须同时声明
width、height和viewBox，例如：width="100" height="100" viewBox="0 0 100 100" -
viewBox数值建议用整数，避免小数导致 subpixel 渲染问题 - 避免用
%或em设置 SVG 尺寸，优先用px或rem
复杂点在于：进度环的 SVG 路径坐标、文字位置、阴影效果，在不同屏幕密度下都要保持清晰可读，而这些没法靠 media query 全覆盖。最省事的做法是把环图导出为 2x PNG 作后备，但那就不是“纯 HTML”了。
