實作步驟：1、使用linear-gradient()為文字域新增漸層背景效果，語法「background-image: linear-gradient(...);」；2、使用background-clip屬性和color屬性讓漸層背景色只在文字域的文字上顯示，也就是讓文字漸層有不同顏色，語法「background-clip: text;color: transparent;」。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
在CSS中，可以透過為文字域中文字新增漸層效果來實現文字不同顏色。
css3文字漸層色：linear-gradient() background-clip
CSS 中並沒有直接的屬性來設定文字漸變，通常文字只能是純色。不過可以透過背景裁切background-clip讓背景色在文字區域顯示出來，看著就像是文字有了漸層
效果圖
程式碼
<!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>为你定制 发现精彩</textarea>
</body>
</html>程式碼不多，我們來解析一下：
background-image: linear-gradient(to right, red, blue);是背景圖取值為漸層色。
漸層效果是作用在背景上的，怎麼能讓效果作用在文字上？這就使用到background-clip 屬性。因為它是一個新屬性，有相容問題，因此要加前綴
background-clip: text; -webkit-background-clip: text;
background-clip 屬性規定背景的繪製區域
語法：
background-clip: border -box|padding-box|content-box;
#上面沒有說取值text 的情況，看到前面的前綴，大家應該也能想到，它的相容性問題了，目前還不是能所有瀏覽器都支援。
取值為text的意思，就是以區塊內的文字作為裁剪區域向外裁剪，文字的背景即為區塊的背景，文字之外的區域都會被裁剪掉。
可以看到，有一點點的漸變，但不明顯；這是因為文字本身也有顏色，有顏色的文字會覆蓋在背景之上。所以，我們最後寫color: transparent; 讓文字是透明色，就是讓後面背景色顯示出來。
（學習影片分享：web前端）
以上是css怎麼讓文字域中字用不同顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章！
聊聊怎么巧用CSS给普通黑色二维码添上彩色渐变！Jul 14, 2022 am 10:34 AM怎么巧用 CSS 构建渐变彩色二维码？下面本篇文章就来给大家介绍一下利用CSS给普通黑色二维码添上彩色渐变的方法，希望对大家有所帮助！
css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM在css中，可用list-style-type属性来去掉ul的圆点标记，语法为“ul{list-style-type:none}”；list-style-type属性可设置列表项标记的类型，当值为“none”可不定义标记，也可去除已有标记。
css与xml的区别是什么Apr 24, 2022 am 11:21 AM区别是：css是层叠样式表单，是将样式信息与网页内容分离的一种标记语言，主要用来设计网页的样式，还可以对网页各元素进行格式化；xml是可扩展标记语言，是一种数据存储语言，用于使用简单的标记描述数据，将文档分成许多部件并对这些部件加以标识。
css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM在css中，可以利用cursor属性实现鼠标隐藏效果，该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状，当属性值设置为none时，就可以实现鼠标隐藏效果，语法为“元素{cursor:none}”。
css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM转换方法：1、给英文元素添加“text-transform: uppercase;”样式，可将所有的英文字母都变成大写；2、给英文元素添加“text-transform:capitalize;”样式，可将英文文本中每个单词的首字母变为大写。
rtl在css是什么意思Apr 24, 2022 am 11:07 AM在css中，rtl是“right-to-left”的缩写，是从右往左的意思，指的是内联内容从右往左依次排布，是direction属性的一个属性值；该属性规定了文本的方向和书写方向，语法为“元素{direction:rtl}”。
css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM在css中，可以利用“font-style”属性设置i元素不是斜体样式，该属性用于指定文本的字体样式，当属性值设置为“normal”时，会显示元素的标准字体样式，语法为“i元素{font-style:normal}”。
怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM在css3中，可以用“transform-origin”属性设置rotate的旋转中心点，该属性可更改转换元素的位置，第一个参数设置x轴的旋转位置，第二个参数设置y轴旋转位置，语法为“transform-origin:x轴位置 y轴位置”。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
Dreamweaver CS6
視覺化網頁開發工具
禪工作室 13.0.1
強大的PHP整合開發環境
SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
Atom編輯器mac版下載
最受歡迎的的開源編輯器
