css設定字型顏色漸變的方法：1、使用「background-cli」和「text-fill-color」實作字型顏色漸層；2、使用「mask-imag」設定字型顏色漸層；3、使用“linearGradient、fill”設定字體顏色漸層。
本文操作環境：windows7系統、CSS3版，DELL G3電腦
css實作文字色彩漸層的三種方法
在web前端開發過程中，UI設計師經常會設計一些帶有漸變文字的設計圖，在以前我們只能用png的圖片來代替文字，今天可以實現使用純CSS實現漸變文字了。以下就介紹3中實作方式供大家參考！
基礎樣式：
.gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }
第一種方法，使用background-cli、 text-fill-color：
.gradient-text-one{ background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
說明：
background: -webkit-linear-gradient(…) 為文字元素提供漸層背景。
webkit-text-fill-color: transparent 使用透明顏色填滿文字。
webkit-background-clip: text 用文字剪輯背景，用漸層背景作為顏色填滿文字。
第二種方法，使用mask-image：
.gradient-text-two{ color:red; } .gradient-text-two[data-content]::after{ content:attr(data-content); display: block; position:absolute; color:yellow; left:0; top:0; z-index:2; -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0))); }
#說明：
mask-image 和background-image 一樣，不僅可以取值是圖片路徑，也可以是漸層色。
第三種方法，使用linearGradient、fill：
.gradient-text-three{ fill:url(#SVGID_1_); font-size:40px; font-weight:bolder; }
說明：
在SVG中，有兩個主要的漸變類型
：
線性漸層（linearGradient）
放射性漸層（radialGradient）
SVG中的漸層不僅可以用來填滿圖形元素，還可以填滿文字元素
dom範例:
CSS3渐变字体
方法1. background-clip + text-fill-color
花样年华
方法2. mask-image
豆蔻年华
方法3. svg linearGradient
效果：
#推薦學習：《css影片教學》
以上是css怎麼設定字體顏色漸層的詳細內容。更多資訊請關注PHP中文網其他相關文章！
