这是设计软件里最眼熟的那种“蚂蚁线”——选中一个区域后，边框上的虚线不停地绕着框子跑。页面上散布着十张卡片，每张都开着蚂蚁线，但参数各不相同：有的是黑白细密快跑，有的是青色长划缓慢流动，有的圆角、有的方角，有的跑得快到几乎看不出线段。鼠标悬停到任意一张上，动画会立刻暂停，方便你看清线段的实际长度和配色。
整个效果不用 SVG、不用图片、不用 JavaScript，也没有借助 border-image 或 dashed 边框——它只用了两个伪元素、一段重复线性渐变和一层遮罩。因此它能挂在任何元素上，自动继承圆角，也不会占用元素本身的背景。
这套蚂蚁线边框的四个巧思
边框其实是一层被挖空的背景。伪元素铺满整个盒子并向外扩出边框宽度，然后用两层遮罩做差集运算——外层保留、内容区排除，剩下的就是一圈边框形状的可见区域。
线段来自重复线性渐变。两种颜色按两段长度循环，直接得到一条 45 度斜纹；把它当作背景平移就是流动。改两段长度就能得到实线、点线、长划线的各种质感。
用了两个伪元素而不是一个。前后两个分别负责相邻的两条边，动画方向相反，这样四条边跑起来才是“顺着同一个方向绕圈”，而不是两边对着跑。
位移距离是按角度算的。斜纹的横向平移量不等于线段周期，而要除以角度的正弦值，这一步保证动画首尾严丝合缝，看不到跳帧。
三个决定这条线好不好看的细节
其一，遮罩差集是整个效果的地基。伪元素本身是一块实心的斜纹背景，靠这两行才变成一圈边：
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
第一层遮罩按内容盒计算、第二层按整个盒子计算，取差集后中间被挖掉，只剩下 padding 那一圈。好处是边框粗细由 padding 决定，可以做到亚像素级；而且伪元素继承了父元素的圆角，圆角卡片上的蚂蚁线会自然沿着弧线跑，这是用 dashed 边框做不到的。
其二，位移量的三角换算。斜纹是 45 度的，若直接把背景横移一个线段周期，画面会错位，因为斜纹沿水平方向的实际周期比垂直方向长。源码里把周期除以角度的正弦值得到平移量，两个关键帧一个正向、一个反向使用它。这也是为什么改成 30 度或 60 度斜纹依然无缝——公式帮你算好了。
其三，方向用一个正负号切换。动画方向变量只取 1 或 -1，被乘进两个关键帧的位移里。相比写两套关键帧或用 animation-direction 反转，这种做法只需改一个数字，而且不会影响缓动曲线的方向感，这在使用非线性缓动时区别明显。
怎么把它用到自己的项目里
用法很简单：给任意元素加上蚂蚁线的类名，再在这个元素上覆盖你要改的变量即可。全部可调项一共八个，含义直白——两种线段颜色、动画周期、方向、缓动函数、边框宽度、两段线段各自的长度。斜纹角度也是变量，默认 45 度。
常见搭配可以照着页面上的十个示例找：想要经典的选区虚线，就用黑白两色、两段等长、线性缓动、周期几百毫秒；想要科技感的流光，就把第二段颜色设为透明、第一段拉长、缓动换成 ease-in-out，速度放慢；想要几乎静止的呼吸感，把周期调到一两秒即可。
还有两点实践经验：把第二段颜色设为 transparent 时，元素自身的背景会透出来，这时线段的对比度取决于底色，深色底配亮色线最稳；边框宽度小于 1px 在部分设备上会被抹掉，做超细线建议配合更高的对比度而不是无限减小宽度。悬停暂停那一条是单独的规则，不需要可以删掉。
运行提示：效果依赖 mask 与 mask-composite，主流浏览器近两年的版本均已支持，Safari 需较新版本；旧版浏览器上边框会退化为一整块斜纹底，建议做条件判断后再启用。页面可直接双击 index.html 打开，无需服务器。详细运行方法请参见压缩包内的帮助文档。
关于蚂蚁线边框的常见问题
能用在圆角卡片或圆形头像上吗？
可以。伪元素写了继承圆角，父元素设多大的圆角，线就沿多大的弧跑，做成整圆也没问题。
只想让某一条边有蚂蚁线可以吗？
可以，思路是调整两个伪元素的 padding 分配——现在是一个负责上左、一个负责下右。只保留一条边时把其余方向的 padding 归零即可，注意动画位移方向要与该边走向一致。
会影响性能吗？页面上放几十个会卡吗？
动画只改变背景位置，属于合成层内的廉价操作，数量多也不容易掉帧。若确实需要极多实例，建议给不在视口内的元素暂停动画，或复用同一套变量减少样式计算。
移动端上线看起来发虚怎么办？
多为高密度屏下 1px 线被缩放导致。可以把边框宽度改用相对单位、或把两段线段长度同时放大一档，视觉上会清晰很多。
这个边框特效适合放在哪里
它最自然的用途是“选中/激活”状态：可拖拽区域的高亮框、图片裁剪工具的选区、看板里被选中的卡片、表单校验时的焦点提示。做成科技风的仪表盘卡片描边、活动页的奖品框也很合适。遮罩挖空、三角换算与十组参数预设的完整写法都在源码里，注释清晰，下载后可直接查看取用。
