CSS Tips：段落每行渐变色文本效果的实现方法

回到正题？怎么实现多行而且不管任何填充角度都有相同效果？实现这个效果有一个关键属性：box-decoration-break。简单的说一下，box-decoration-break属性具有两个属性值：slice和clone，其对应的效果如下：

用于一个段落中，其效果如下：

是不是离我们的目标越来越近了。那么把这个属性box-decoration-break:clone用于我们的示例：

效果如下：

咱们来验证一下是不是符合我们预期想要的效果：

小技巧：box-decoration-break运用于行内元素，并且配上相应的line-height，让行与行之间有一定的间距。

回过头来，咱们看看，使用box-decoration-break是在行内元素和块元素之间的区别：

是不是很完美。如果喜欢自己动手试试。

总结

这篇文章通过CSS的background-clip:text、color:transparent和box-decoration-break能实现每行文本渐变填充的效果，而且每行效果相同。而且不限于任何的渐变角度。