這篇文章給大家分享的是有關(guān)css如何實(shí)現(xiàn)段落每行漸變色文本效果的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。
目標(biāo)效果
看到上面的效果，我想很多人首先會(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ū)別：
感謝各位的閱讀！關(guān)于“css如何實(shí)現(xiàn)段落每行漸變色文本效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
重慶分公司
重慶分公司
