携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情
众所周知，一般绘制虚线的时候，我们都会使用一个高度为0的DOM，给她的边框加上dash属性：
然而，惨遭UI小姐姐拒绝了： “虚线太密了，调节稀疏一点” “可以搞彩色的吗” “能不能让它像胶片一样动起来？”
em…… “切图吧” “没空！”
那……不行用笨办法？搞一行span元素颜色交替变化来模拟出虚线：
不行，这个方法太笨了，而且长度受限，让它动起来更是麻烦，那么有什么样的方式可以在一个元素里出现多种色彩以模拟出虚线呢？背景+渐变就是一个优秀的解决方案：
linear-gradient是CSS的线性渐变属性，语法为：
linear-gradient(方向,颜色 位置,颜色 位置……）
举个例子来说：
background: linear-gradient(to right,#000 0%,#FFF 100%) // 这是从左到右从黑到白的渐变
background: linear-gradient(to left,#000 0%,#FFF 100%) // 这是从右到左从黑到白的渐变（没错只是换个方向）
background: linear-gradient(to right,#000 0%,#FFF 50%, #000 100%) // 这是从左到右从黑到白再到黑的渐变
那么如何用它来模拟虚线呢，只要将同一个的颜色设定成固定范围并设定尺寸和重复就可以了：
background-image: linear-gradient(to right, #BAAEFB 0%, #BAAEFB 50%, transparent 50%, transparent 100%);
background-size: 20rpx 4rpx;//设定一段的大小，在这个例子中就是一个紫色一个透明
background-repeat: repeat-x;//将这两个“小方块”横向重复，就绘制出了一根虚线
效果如下：
那么，通过设定不同的颜色百分比，设定不同数值的background-size，就可以生成不同疏密程度，横线长短，多种颜色的虚线了，甚至通过@keyframe的动画设定，还可以让它动起来：
终于让UI小姐姐满意了！然而小姐姐出了新的设计稿：
需要自定义边框虚线的密度和横线长短……
em…… 需要再考虑新方案了
