遇到了这个帖子
CSS 超级朋友们！您见过如何实现像 @css 这篇文章 (https://#/2j8p4jmaT4) 中的多行填充文本，但渐变不会在每行重置吗？ pic.twitter.com/MVPdAjxt1W
— Dan Mall (@danmall) 2018年12月3日
我的第一个想法是
- 这些行是填充的，这 很棘手。
box-decoration-break可能对我们有帮助。
但事实证明我们需要一些额外的技巧才能做到这一点。
如果纯色就可以了，那么一些填充加上 box-decoration-break 应该可以提供基本的框架。
查看 CodePen 上 Chris Coyier (@chriscoyier) 创建的 使用 box-decoration-break 的多行填充。
但是，在多行上使用渐变会很奇怪。
查看 CodePen 上 Chris Coyier (@chriscoyier) 创建的 使用 box-decoration-break 的多行填充。
我要感谢来自该帖子中的 Matthias Ott，他给出了我认为完美的答案。
查看 CodePen 上 Matthias Ott (@matthiasott) 创建的 使用混合模式的多行背景渐变。
技巧在于，使用纯白色文本和黑色背景，将填充的多行背景设置为所需的样子。 然后，在整个区域上设置一个伪元素，并在黑色区域中设置渐变。 添加 混合模式: lighten; 以使渐变仅在黑色区域中出现。 棒极了。
这真是一个巧妙的技巧。 如果可以的话，我建议一个小改进：在伪元素上添加
pointer-events: none;。 这样用户就可以选择文本（目前在 Mac 版 Firefox 上无法选择）。我认为 box-decoration 属性的前缀顺序应该颠倒：先加前缀，后加标准。 否则会应用前缀属性。
不要忘记在伪元素上使用
pointer-events: none，这样文本仍然可以选择（如果需要）。在这种情况下，您可以将
.gradient-multiline span的background-color设置为#3629a2，与线性渐变的起始颜色相同，效果仍然有效。 不支持mix-blend-mode: lighten的浏览器看起来更接近预期设计，而不是黑色框中的白色文本。在这种情况下，只有当我的背景为白色时它才会起作用。
*如果它后面的背景是纯色，它就会起作用；如果多行后面的颜色与页面背景相同，则会完成效果。
关于这一点，
overflow: hidden;是多余的。注意：此 lighten 技巧仅在背景颜色为白色时有效。
大家好！
感谢您的评论！
我在代码笔中添加了
pointer-events: none并更改了前缀和非前缀box-decoration-break的顺序。您说得对，这只有在白色背景上才有效。 我创建它作为原始代码笔来探索它是否可以通过某种方式实现，但是如果您想在生产环境中使用它，肯定还需要做一些工作。
非常酷