htmldiv虚线背景，聊聊css绘制虚线
ems
css绘制虚线⼀般都是border:1px dashed black；这种是最简单的实现虚线的⽅式，今天来看看⼀些其他绘制虚线的⽅式，包括渐变虚线和动态虚线：
border dashed实现渐变虚线
这个是最简单的渐变虚线
mpa双证这种渐变的原理就是先绘制⼀个渐变的背景，然后设置border:2ps dashed #fff；中间设置⼀个⽩⾊的div，这样虚线透明的部分就可以把背景⾊给透出来。
要注意的是，这⾥需要设置background-origin:border-box，表⽰背景从border部分开始绘制，否则默认是从内容部分开始绘制：
2012高考真题
spoon上图左边就是只有内容部分绘制了渐变背景，右边是背景包含边框，我们可以发现右边是正常的。
css mask实现动态渐变虚线vsas
朱莉和茱莉亚这个原理就是先绘制⼀个渐变的背景，然后在边缘部分绘制mask遮罩，这⾥的遮罩是和透明度相关的，没有设置透明度的显⽰背景，设置了透明的不显⽰。
注意这⾥设置了4条mask，每个mask都是⼀个单元渐变设置了⽔平/垂直重复，单元渐变有⼀部分设置了不透明，⼀部分设置了透明。mask1
crazy的意思mask3
repeating-linear-gradient实现动态虚线英语自我介绍(带翻译)
repeating-linear-gradient是linear-gradient的升级版，它和linear-gradient也有些不同：
这⾥我们利⽤repeating-linear-gradient绘制⿊⽩想间的条状，通过设置background-position即可实现动态虚线，但是要注意⾓度：
上⾯两个图都是设置了repeating-linear-gradient(Adeg, transparent, transparent 2px, #000 2px, #000 6px)，并且移动了background-position，我们发现右边的图会有错乱的感觉，左边正常的，因此如果通过background-position来做虚线，那么必须要找好⼀个⾓度A，防⽌移动时有视觉误差。
除了找好⼀个⾓度外，还要找到⼀个移动的最⼩单元长度，这样移动的时候才顺畅。奥林匹斯十二神歌词
svg stroke-dashofft动态虚线
这个就⽐较简单了，先⽤path描绘出⼀个边框，然后通过stroke-dashofft来控制描边的offt来达到动态虚线的效果。烟台外语培训
