本文介绍一种纯 svg 原生方案，通过叠加两个 `
在 SVG 中，原生并不支持 border-style: double（该 CSS 属性仅对 HTML 盒模型生效），也无法直接为
原理很简单：绘制两层细边框矩形，外层略大、内层略小，并保持相同的描边颜色与宽度，中间留出空白间隙，即可形成典型的双线效果。关键在于精确计算坐标与尺寸，确保边框居中且无像素偏移：
✅ 技术要点说明：
- 所有
均使用 stroke-width="1"，避免粗描边导致间隙失真； - x 和 y 设置为 .5 值（如 0.5, 2.5）可使描边精确落在像素中心，防止抗锯齿模糊；
- 外矩形 width="249" / height="99" 对应 250×100 SVG 画布减去 1px 总边框厚度（两侧各 0.5）；
- 内矩形进一步缩进 2px（即 x/y +2, w/h -4），确保两线间距恒为 2px，视觉等效于 CSS double 的标准间距；
- fill="none" 是必需的，否则会遮挡内容。
⚠️ 注意事项：
- 此方案适用于静态尺寸 SVG；若需响应式适配，建议结合 viewBox + preserveAspectRatio，并用 JS 动态重算矩形参数；
- 不要将两矩形 stroke-width 设为 2 或更大——这会压缩间隙，破坏“双线”辨识度；
- 若需不同颜色双线（如外红内蓝），只需分别设置 stroke 属性，灵活性反而高于 CSS outline。
综上，该双
