【css设置虚线间隔大一点】

CSS 的 border 属性，可以设置实线，虚线还有点线。不过直接使用 border: 1px dashed #F00 虚线距离太小，非常难看，很难满足UI图的效果。
可以使用 background 背景的渐变属性，来替代 border 方案，方法如下：

.fengexian {
  width: 100%;
  height: 2px;
  background-image: linear-gradient(
    to right,
    rgb(255, 255, 255, 0.3) 0%,
    rgb(255, 255, 255, 0.3) 50%,
    transparent 50%
  );
  background-size: 20px 2px;//第一个值（20px）越大线条越长间隙越大
  background-repeat: repeat-x; 
}

也可以使用 SVG 线条设置间距：

path {
    stroke-dasharray: 4;
    stroke-dashoffset: 22;
}

这样就可以更加灵活的设置虚线效果了。

声明：本文由w3h5原创，转载请注明出处：《CSS border dashed属性虚线间隔不可控的解决方法》 https://www.w3h5.com/post/445.html