常用网站建设技术,网络优化工程师工作内容,正规小程序开发的公司,开80服务器怎么做网站这次给大家带来段落每行渐变色文本效果#xff0c;段落每行渐变色文本效果的注意事项有哪些#xff0c;下面就是实战案例#xff0c;一起来看一下。今天小编在Codepen上看到一个CSS写的效果。一个段落的每行文本是渐变效果。对于单行文本或单个词实现渐变填充效果并不是什么…这次给大家带来段落每行渐变色文本效果段落每行渐变色文本效果的注意事项有哪些下面就是实战案例一起来看一下。今天小编在Codepen上看到一个CSS写的效果。一个段落的每行文本是渐变效果。对于单行文本或单个词实现渐变填充效果并不是什么奇怪的事情不过对于一个段落的每一行实现一个文本渐变填充的效果。估计还是会令很多人感到好奇。如果你是其中好奇的一员请继续往下阅读一探其中之究竟目标效果今天的目标效果是实现下面这样的效果或者说了解这种效果制作的小技巧看到上面的效果我想很多人首先会想到的就是background-clip:text、color:transparent和linear-gradient来完成。那么事实是这样吗如何完成一个段落的每行文本渐变效果了解CSS的同学都清楚使用background-image: linear-gradient(to right, deeppink, dodgerblue);-webkit-background-clip: text;color: transparent;就可以轻易的实现一个文本的渐变填充效果。比如下面这个示例来做个小实验如果文本不是一个词或单行而是整个段落效果会是如何效果似乎也是完美的。如果把渐变效果参数换一换渐变效果是一个斜角background-image: linear-gradient(135deg, deeppink, dodgerblue);看看两者的效果仔细一看两个效果还是有差异的。先来看看同一个大小容器(本示例中的p元素其大小是765px * 165px)对于两种不同的渐变效果,先来看to right的填充效果再来看135deg的填充效果到这里了你或许就知道前面的示例有何不同而且也知道其中的原因是什么如果我们想要各种渐变对于段落的每行填充效果都相同应该怎么实现在实现之前先简单的总结一下在linear-gradient中使用to right或者to left不管是单个词、单行文本或者多行文本得到的文本填充效果都将一致。但对于其他渐变的角度参数那么多行文本填充中的每行效果就将有差异。回到正题怎么实现多行而且不管任何填充角度都有相同效果实现这个效果有一个关键属性box-decoration-break。简单的说一下box-decoration-break属性具有两个属性值slice和clone其对应的效果如下用于一个段落中其效果如下是不是离我们的目标越来越近了。那么把这个属性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;效果如下咱们来验证一下是不是符合我们预期想要的效果小技巧box-decoration-break运用于行内元素并且配上相应的line-height让行与行之间有一定的间距。回过头来咱们看看使用box-decoration-break是在行内元素和块元素之间的区别是不是很完美。如果喜欢自己动手试试。相信看了本文案例你已经掌握了方法更多精彩请关注php中文网其它相关文章推荐阅读
