需求：

• 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 轴会有重复的显示结果看起来就是一个虚线