段落每行渐变色文本效果

今天小编在Codepen上看到一个CSS写的效果。一个段落的每行文本是渐变效果。对于单行文本或单个词实现渐变填充效果并不是什么奇怪的事情，不过对于一个段落的每一行实现一个文本渐变填充的效果。估计还是会令很多人感到好奇。如果你是其中好奇的一员，请继续往下阅读，一探其中之究竟！

目标效果

今天的目标效果是实现下面这样的效果，或者说了解这种效果制作的小技巧：

看到上面的效果，我想很多人首先会想到的就是background-clip:text、color:transparent和linear-gradient来完成。那么事实是这样吗？

如何完成一个段落的每行文本渐变效果

了解CSS的同学都清楚，使用：

background-image: linear-gradient(to right, deeppink, dodgerblue);
-webkit-background-clip: text;
color: transparent;

就可以轻易的实现一个文本的渐变填充效果。比如下面这个示例：

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

background-image: linear-gradient(135deg, deeppink, dodgerblue);
background-clip: text;
-webkit-background-clip: text;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
color: transparent;

效果如下：

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

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！

推荐阅读：

H5中APP监听返回事件处理

前端技术实现文本文字纹理叠加

以上就是段落每行渐变色文本效果的详细内容，更多请关注其它相关文章！