border虚线间隔

### CSS Border 虚线间隔设置

对于希望实现带有特定间隔的虚线边框效果，在标准 `border` 属性基础上确实无法直接控制虚线间的距离。一种有效的方法是通过背景渐变的方式来模拟这种效果。

利用 `linear-gradient()` 函数配合 `background-size` 可以精确地定义每一段线条及其后的空白区域长度，从而达到自定义虚线间距的效果[^2]：

.test-border-line {
    height: 1px;
    background-image: linear-gradient(to right, #E7C737 0%, #28B35B 50%, transparent 0%);
    background-size: 14px 1px;
    background-repeat: repeat-x;
}

上述代码片段展示了如何创建一个具有固定颜色变化模式（黄色到绿色再到透明）并重复显示于X轴方向上的细条纹作为元素底部装饰。其中关键是调整 `background-size` 的第一个参数值大小来改变实际渲染出来的虚线间距离——该值越大，则相邻两段实线之间留白越多；反之亦然。

另外还有一种基于 `repeating-linear-gradient()` 实现更简洁灵活方案的例子如下所示[^4]:

div {
    background: repeating-linear-gradient(
        to right,
        #000,           /* 单位线的颜色 */
        #000 1px,       /* 黑色部分占据的位置 */
        transparent 1px,/* 开始过渡至透明 */
        transparent 2px /* 完全变为透明直至下一个周期起点 */
    );
    height: 1px;         /* 设定高度为单像素 */
    width: 100%;         /* 宽度覆盖整个容器 */
}

此方式允许更加直观地指定每一阶段的具体尺寸，使得开发者能够轻松微调最终视觉呈现中的间隙比例。