stroke-dasharray仅适用于SVG元素的stroke描边，无法作用于CSS border；因其属SVG绘图属性，浏览器会静默忽略div等普通元素上的该声明。
直接用 stroke-dasharray 做边框动画，必须配合 SVG 路径（<path> 或 <polyline>），纯 CSS 的 border 属性不支持该属性。 想用虚线“绘制感”或“描边流动”效果，绕不开 SVG；强行在普通元素上写 stroke-dasharray 会完全无效。
为什么 stroke-dasharray 不能用在普通 div 的 border 上
因为 stroke-dasharray 是 SVG 绘图属性，只作用于 SVG 元素的描边（stroke），和 CSS 的 border 完全无关。浏览器不会把 div { stroke-dasharray: 10,5; } 当成有效声明——它会被忽略，控制台也不会报错，只会静默失效。
常见误操作：
- 给
<div class="box">直接加stroke-dasharray样式 - 以为
border-style: dashed和stroke-dasharray可以互通，其实前者是固定模式，后者可精确控制每段长度 - 在伪元素里用
border模拟路径，再试图加stroke-dasharray—— 同样无效
用 <svg> + stroke-dasharray + @keyframes 实现描边动画
核心思路：先定义一条路径，用 stroke-dasharray 设定虚线总长与间隙，再通过动画改变 stroke-dashoffset 让“虚线起始点”移动，形成描边流动效果。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 路径需有明确的
stroke和fill: none（否则描边被遮盖） - 先用 JavaScript 或 DevTools 查出路径总长度（
getTotalLength()），或用固定值（如200）粗略估算 -
stroke-dasharray设为200,200（表示“实线200 + 空白200”循环），stroke-dashoffset从200动画到0，就能实现“从无到有”的绘制感 - 动画必须写在 SVG 元素内部样式或
<style>块中，外部 CSS 类选择器有时因作用域问题不生效
简短示例：
<svg viewBox="0 0 200 200">
<path d="M20,20 Q100,10 180,20 T180,180 T20,180 T20,20"
fill="none"
stroke="#3498db"
stroke-width="4"
stroke-dasharray="200,200"
stroke-dashoffset="200">
<animate attributeName="stroke-dashoffset"
from="200" to="0"
dur="2s" repeatCount="indefinite" />
</path>
</svg>用 CSS @keyframes 控制 SVG 描边动画更灵活
比起内联 <animate>，CSS 动画更容易复用、调试和响应状态（比如 hover 触发）。但要注意选择器必须能精准命中 SVG 内部元素。
关键细节：
- SVG 中的
<path>无法直接用类名选中（除非加class="my-path"），且部分浏览器对 SVG 内 CSS 动画支持较弱 - 推荐把动画写在
<style>标签内，并用属性选择器或 ID 定位，例如：path[stroke='#3498db'] { animation: draw 2s linear infinite; } -
stroke-dashoffset动画方向决定“绘制方向”：从大值到小值是正向绘制，反过来就是擦除效果 - 若路径是闭合图形（如圆形
<circle>），总长度可用r * 2 * π * 2估算（stroke-width不影响长度计算）
容易被忽略的兼容性与性能点
不是所有 SVG 描边动画都能在旧版 Safari 或安卓 WebView 中流畅运行。最稳妥的做法是：
- 避免在
<path>上同时动画stroke-dashoffset和stroke-width—— 后者会触发重排，抵消 GPU 加速优势 - 不用
transparent作为stroke起始色，改用rgba(0,0,0,0)，防止 iOS 15 以下颜色插值异常 - 如果要支持 IE，得彻底放弃
stroke-dasharray方案，改用 JS 驱动或 CSS 伪元素分段模拟 - 复杂路径（含大量贝塞尔曲线）在低端设备上可能掉帧，建议用
will-change: transform提前提示渲染层，但仅限真正需要动画的元素
真正难的不是写出来，而是让描边动画在各种屏幕尺寸、各种系统版本下都保持节奏一致——这往往需要手动校准 stroke-dasharray 数值，而不是依赖自动计算。
