欢迎关注我的公众号：前端大侦探最近有同事问我这样一个问题：我需要画一条适应文字的书写网格线，而设计稿是这样的，其实就是一排虚线。要求后面虚线的竖直间隔跟随行高自适应，保证每一列虚线后面的文字背景是动态的，可以是纯色，也可以是渐变，也可以是图片。虚线看似简单，实则暗藏玄机。一起来看看实现方法吧。1.纯色背景下的虚线我们先来看这种简单的情况，可以通过两层渐变覆盖来实现。假设文字行高为2，首先在水平方向绘制body{background:linear-gradient(#6661px,transparent0)0-1px/100%2em;}注意这里的背景大小为100%2em,并且高度跟随text的行高，所以高度为2em，效果如下然后，画一条竖直的实线覆盖，为了区分，先把body换成浅红色{background:linear-gradient(toright,#ffdbdb4px,transparent0)0-4px/8px100%,/*vertical*/linear-gradient(#6661px,transparent0)0-1px/100%2em;/*horizo??ntal*/}这个绘制了一个垂直的tile，间隔为4px的虚线，效果如下应该更容易理解，就是两个方向的渐变叠加了。然后，只需将红色更改为与背景颜色相同的颜色即可。比如这里是白体{background:linear-gradient(toright,#fff4px,transparent0)0-4px/8px100%,/*vertical*/linear-gradient(#6661px,transparent0)0-1px/100%2em；/*horizo??ntal*/}这样就实现了纯色下方的虚线网格，效果如下2、如果渐变背景下的虚线不是纯色，而是渐变怎么办？假设有这么一个背景，如果直接用前面的方法，可能会变成白色，直接盖住后面的渐变背景。那么如何解决这个问题呢？像这样叠加混合的情况下，一般会想到混合模式。是的，这里的混音模式也可以轻松搞定。要使用混合模式，两层背景必须在不同的容器中，然后使用mix-blend-modehtml{background:linear-gradient(45deg,#f5ffc0,#fff);}body{font-size:20px;背景：线性渐变（向右，#fff4px，透明0）0-4px/8px100%，线性渐变（#6661px，透明0）0-1px/100%2em；mix-blend-mode:darken;}这里使用了混合模式中的darken。此模式可以去除白色部分并保留其他部分。效果如下。完整代码可以在以下任一链接查看CSS点线混合混合模式(codepen.io)CSS点线混合混合模式(runjs.work)3.通过锥形渐变绘制接下来介绍一个更硬核的画法：为什么圆锥梯度（conic-gradient）更硬核？因为这样画出来的图形完全是虚线，而且对混合模式没有任何限制。首先，我们对其进行图形化分析，找出最小的重复单元，如下图所示。这实际上是位于左上角的矩形。那么，如何画出锥形渐变呢？注：可能有同学会疑惑，这样的矩形线性渐变不是很容易实现吗？确实可以，但是只能实现一个，不能平铺。这似乎无关紧要。下面将带你一步步进化。一、最原始的语法div{background:conic-gradient(#666,transparent);}这是一个透明的渐变到灰色，效果如下这就是锥形渐变的样子！然后，我们可以调整渐变的分界线div{background:conic-gradient(#66690deg,transparent0deg);}使其变成一个边界清晰的正方形，然后改变起始角度，通过from关键字div{background:conic-gradient(from270deg,#66690deg,transparent0deg);}这样起始角度就会从270deg开始，如下，然后改变中心点的位置，默认水平垂直居中，我们需要改成左上角需要用at关键字div{background:conic-gradient(from270degat40px10px,#66690deg,transparent0deg);}这里改成左上角的40px,10px，如下最后，改变背景的大小，默认是100%宽高，我们需要把它改成实际大小div{background:conic-gradient(from270degat40px10px,#66690deg,transparent0deg);background-size:80px90px;}会自动平铺展开。下面的原理是这样的。实际的虚线比较小，应该是4px1px，所以实际应用应该是这样的background-size:8px2em;}效果如下完整代码可以在以下任一链接查看CSSdot-lineconic-gradient(codepen.io)CSSdot-lineconic-gradient(runjs.work)4.动态SVG背景绘制最后介绍一下最简单的实现方式，就是“切图”。不过这种“切图”与普通的不同，因为这个尺寸是动态的，随着文字的行高而变化，所以需要采取一定的“措施”。先在绘图软件中画出这样一个图形，例如下面是在figma中绘制的。外面的宽高无所谓，随便设置就可以了。你可以获得这样的SVG
