站長(zhǎng)資訊網(wǎng)
實(shí)現(xiàn)步驟：1、使用linear-gradient()給文本域添加漸變背景效果，語(yǔ)法“background-image: linear-gradient(…);”；2、使用background-clip屬性和color屬性讓漸變背景色只在文本域的文字上顯示，即讓文字漸變有不同顏色，語(yǔ)法“background-clip: text;color: transparent;”。
前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在CSS中，可以通過給文本域中文字添加漸變效果實(shí)現(xiàn)文字不同顏色。
css3文字漸變色：linear-gradient()+background-clip
CSS 中并沒有直接的屬性來設(shè)置文字漸變，通常文字只能是純色。不過可以通過背景裁剪 background-clip讓背景色在文本區(qū)域顯示出來，看著就像是文字有了漸變
效果圖
代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> textarea { font-size: 20px; background-image: linear-gradient(to right, red, blue); background-clip: text; -webkit-background-clip: text; color: transparent; /*需要文字透明*/ } </style> </head> <body> <textarea>為你定制 發(fā)現(xiàn)精彩</textarea> </body> </html>
代碼不多，我們來解析一下：
background-image: linear-gradient(to right, red, blue);是背景圖 取值為漸變色。
漸變效果是作用在背景上的，怎么讓該效果作用在文字上？這就使用到background-clip 屬性。因?yàn)樗且粋€(gè)新屬性，有兼容問題，因此要加前綴
background-clip: text; -webkit-background-clip: text;
background-clip 屬性 規(guī)定背景的繪制區(qū)域
語(yǔ)法：
background-clip: border-box|padding-box|content-box;
上面沒有說取值 text 的情況，看到前面的前綴，大家應(yīng)該也能想到，它的兼容性問題了，目前還不是能所有瀏覽器都支持。
取值為text的意思，就是以區(qū)塊內(nèi)的文字作為裁剪區(qū)域向外裁剪，文字的背景即為區(qū)塊的背景，文字之外的區(qū)域都將被裁剪掉。
可以看到，有一點(diǎn)點(diǎn)的漸變，但不明顯；這是因?yàn)槲淖直旧硪灿蓄伾蓄伾奈淖謺?huì)覆蓋在背景之上。所以，我們最后寫color: transparent; 讓文字為透明色，就是讓后面背景色顯示出來。
（學(xué)習(xí)視頻分享：web前端）
