這次給大家?guī)?lái)段落每行漸變色文本效果，段落每行漸變色文本效果的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。

今天小編在Codepen上看到一個(gè)CSS寫的效果。一個(gè)段落的每行文本是漸變效果。對(duì)于單行文本或單個(gè)詞實(shí)現(xiàn)漸變填充效果并不是什么奇怪的事情，不過(guò)對(duì)于一個(gè)段落的每一行實(shí)現(xiàn)一個(gè)文本漸變填充的效果。估計(jì)還是會(huì)令很多人感到好奇。如果你是其中好奇的一員，請(qǐng)繼續(xù)往下閱讀，一探其中之究竟！

目標(biāo)效果

今天的目標(biāo)效果是實(shí)現(xiàn)下面這樣的效果，或者說(shuō)了解這種效果制作的小技巧：

看到上面的效果，我想很多人首先會(huì)想到的就是background-clip:text、color:transparent和linear-gradient來(lái)完成。那么事實(shí)是這樣嗎？

如何完成一個(gè)段落的每行文本漸變效果

了解CSS的同學(xué)都清楚，使用：background-image: linear-gradient(to right, deeppink, dodgerblue);

-webkit-background-clip: text;

color: transparent;

就可以輕易的實(shí)現(xiàn)一個(gè)文本的漸變填充效果。比如下面這個(gè)示例：

來(lái)做個(gè)小實(shí)驗(yàn)，如果文本不是一個(gè)詞或單行而是整個(gè)段落，效果會(huì)是如何？

效果似乎也是完美的。如果把漸變效果參數(shù)換一換，漸變效果是一個(gè)斜角：background-image: linear-gradient(135deg, deeppink, dodgerblue);

看看兩者的效果：

仔細(xì)一看，兩個(gè)效果還是有差異的。先來(lái)看看同一個(gè)大小容器(本示例中的p元素，其大小是765px * 165px)，對(duì)于兩種不同的漸變效果,先來(lái)看to right的填充效果：

再來(lái)看135deg的填充效果：

到這里了，你或許就知道前面的示例有何不同？而且也知道其中的原因是什么？如果我們想要各種漸變對(duì)于段落的每行填充效果都相同，應(yīng)該怎么實(shí)現(xiàn)？在實(shí)現(xiàn)之前，先簡(jiǎn)單的總結(jié)一下：

在linear-gradient中使用to right或者to left，不管是單個(gè)詞、單行文本或者多行文本，得到的文本填充效果都將一致。但對(duì)于其他漸變的角度參數(shù)，那么多行文本填充中的每行效果就將有差異。

回到正題？怎么實(shí)現(xiàn)多行而且不管任何填充角度都有相同效果？實(shí)現(xiàn)這個(gè)效果有一個(gè)關(guān)鍵屬性：box-decoration-break。簡(jiǎn)單的說(shuō)一下，box-decoration-break屬性具有兩個(gè)屬性值：slice和clone，其對(duì)應(yīng)的效果如下：

用于一個(gè)段落中，其效果如下：

是不是離我們的目標(biāo)越來(lái)越近了。那么把這個(gè)屬性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;

效果如下：

咱們來(lái)驗(yàn)證一下是不是符合我們預(yù)期想要的效果：

小技巧：box-decoration-break運(yùn)用于行內(nèi)元素，并且配上相應(yīng)的line-height，讓行與行之間有一定的間距。

回過(guò)頭來(lái)，咱們看看，使用box-decoration-break是在行內(nèi)元素和塊元素之間的區(qū)別：

是不是很完美。如果喜歡自己動(dòng)手試試。

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

總結(jié)

以上是生活随笔為你收集整理的php 渐变色,段落每行渐变色文本效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。