css 实现自定义虚线
需求：
- ui 画的图是虚线，但是虚线很宽正常的border 参数无法做到
进程：
-
尝试使用
border：1px dashed -
发现使用这个虽然是虚线但是很短密密麻麻的
-
这并不是我们想要的那就只能换方案
-
第一个最简单，让ui 画一个图然后作为背景放在div 里面就行了
-
但是这个方案比较费ui，还容易挨骂所以我一般践行自己动手，丰衣足食
-
background-image 可以使用 linear-gradient
-
这个参数可以画一条线在div里面
-
参考
background-image: 'linear-gradient(to right, #D8D8D8 0%, #D8D8D8 50%, transparent 50%) -
这个参数可以让你在背景上画一条线，参数 分别是从左到右，由0% 的位置开始黑色 到 50% 的位置渐变到黑色，再由 50% 的黑色渐变到 50% 的背景色
-
原理就是渐变的差值为0 所以相当于就是有50% 的黑色线条 50% 的背景色，看起来就像是虚线里的一个横
-
但是这样会有个问题这个横线很长，那就要配置一个 background-size
-
参考
background-size: 12px 1px -
这个参数会使你的横线只有1px 宽，12px 长，但是虚线还是只有一根，或者就是一堆x y 轴上都是密密麻麻的
-
那就要加上
background-repeat: repeat-x -
这个参数表示只有x 轴会有重复的显示结果看起来就是一个虚线