CSS短虚线实现全解析：从border dashed到SVG可控方案

如果你只是想在页面上画一条 css 短虚线，第一反应通常是 border: 1px dashed #999。但等你把 1px 加到 2px、3px，再从 Chrome 切到 Firefox 扫一眼，就会发现一个尴尬的事实：浏览器根本没打算让你控制虚线段的长度和间距。设计稿里那条“线段短、间隔小、节奏紧凑”的短虚线，用原生 dashed 是还原不出来的。

这篇文章会把这件小事拆透：为什么 dashed 不可控、有哪些方案可以实现真正可控的短虚线、蚂蚁线动画怎么做、移动端和小程序里有哪些兼容坑，以及我实际项目中按场景怎么选型。无论你是做后台管理系统、活动页、小程序，还是做组件库的样式还原，这篇都值得收藏。

1. 为什么 border 的 dashed 总在跟你对着干

1.1 浏览器对虚线段的“自由裁量权”

先说结论：CSS 规范里只规定了 dashed 应该是“若干线段 + 若干间隙”交替出现，但线段具体多长、间隙具体多大，完全由浏览器自己去定。换句话说，你写 border: 1px dashed #333，本质上是在说“给我一条虚线”，至于虚线长什么样，是 Chrome、Firefox、Safari 各自看心情决定的。

这带来一个很直观的问题：同样的代码，不同浏览器渲染出的虚线节奏完全不一样。我拿 border-top: 2px dashed #888 在 Chrome 和 Firefox 里对比过，Chrome 的虚线段偏短偏密，Firefox 的线段明显更长、间隙更疏。而且当你把 border-width 从 1px 调到 4px，虚线段的长度也会跟着变长，线越粗、段越长，这个比例关系同样不可控。

对普通分隔线来说，这种差异可能还能忍。但一旦设计稿里明确是“短虚线”，比如 4px 线段、3px 间隔那种紧凑节奏，border: dashed 基本就宣告报废了。你调来调去，得到的永远是“大概是个虚线”，而不是“设计稿里那条短虚线”。

1.2 短虚线和点线，先别搞混

很多人在追求“短虚线”时，其实并不清楚自己要的是 dashed 还是 dotted。dotted 是点线，点与点之间留白；dashed 是线段，线段之间留白。低分辨率屏幕上，1px dashed 和 1px dotted 看起来确实非常接近，因为线段太短，短到已经趋近于点。但放大看，一个是矩形小段，一个是圆点，完全是两种气质。

设计稿里常见的“短虚线”，通常是指 4px 到 6px 长度的线段，搭配 3px 到 6px 的间隙，线宽在 1px 到 2px 之间。这个视觉节奏适合做分割线、步骤条连接线、上传区的虚线框，以及一些偏轻量、偏装饰性的界面元素。它传达的感觉是“这里有个边界，但不用太突出”，比实线温和，又比长虚线精致。

搞清楚需求是第一步，因为不同的“短虚线”目标，对应的实现方案优先级完全不同。你如果只是想快速做一条水平短虚线，渐变背景就够了；如果想要一个带圆角的短虚线边框，那大概率得请出 SVG。接下来就进入正题。

2. 四套可控方案：把虚线参数彻底掌握在自己手里

2.1 线性渐变方案：最纯粹也最万能

渐变方案的思路特别朴素：在背景上画一段“颜色 + 透明”的渐变，然后把这段背景水平平铺，视觉上就是一条虚线。以一条水平短虚线为例：

css复制.dashed-line {
  height: 1px;
  background-image: linear-gradient(
    to right,
    #999 0,
    #999 6px,
    transparent 6px,
    transparent 12px
  );
  background-repeat: repeat-x;
  background-size: 12px 1px;
}

拆开看：linear-gradient 里先画 6px 的实色，再画 6px 的透明，整个渐变的宽度是 12px；background-repeat: repeat-x 让它横向重复；background-size: 12px 1px 则规定了每个重复周期是 12px 宽、1px 高。于是最终效果就是 6px 线段 + 6px 间隔的短虚线，完全可控。

如果你想要更短的 4px 线段、4px 间隔，改成这样：

css复制.dashed-line {
  height: 1px;
  background-image: linear-gradient(
    to right,
    #999 0,
    #999 4px,
    transparent 4px,
    transparent 8px
  );
  background-repeat: repeat-x;
  background-size: 8px 1px;
}

垂直方向的短虚线同理，把方向从 to right 改成 to bottom，background-repeat 改成 repeat-y，background-size 改成 1px 12px，再给容器设置一个固定的 width: 1px 就行。

这个方案最大的优势是零额外 DOM、纯 CSS、性能好，而且线段和间隔的