Css3 文字漸變整理（一）

 

一、文本顏色漸變

<gradient> ：可以應用在所有接受圖像的屬性上，允許使用簡單的語法實現顏色漸變，以便UA在渲染頁面自動生成圖像。

語法：<gradient> = linear-gradient() | repeating-linear-gradient() | radial-gradient() | repeating-radial-gradient()

注意：必需在一個有尺寸的盒子里生成。如果盒子沒有尺寸，漸變效果則無法呈現。

可以作用在能接受圖像的任意屬性上：

 background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216)));

 list-style-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216)));

文字顏色漸變比較麻煩，並且兼容性差強人意：

    background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216)));
    -webkit-background-clip: text; /*必需加前綴 -webkit- 才支持這個text值 */
    -webkit-text-fill-color: transparent; /*text-fill-color會覆蓋color所定義的字體顏色： */

兼容性：

text-fill-color，IE果然又不兼容。移動端UC瀏覽器也不兼容。

 -webkit-background-clip: text; 非正式屬性，目前（2017-07-07）僅僅FF、Chrome、Safari支持，並且必須帶前綴。

 

 

二、代碼示例

<view class="demo">css字體文字漸變,css字體文字漸變</view>

.demo {
  width: 500px;
  height: 200px;
  margin: 50px auto;
  font-size: 20px;
  background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(166, 4, 249)), to(rgb(251, 223, 11)));
  /*必需加前綴 -webkit- 才支持這個text值 */
  -webkit-background-clip: text;
  /*text-fill-color會覆蓋color所定義的字體顏色： */
  -webkit-text-fill-color: transparent;
}

 

顯示結果：

 

更多：

Css3漸變(Gradients)-徑向漸變

CSS3漸變(Gradients)-線性漸變

Css3漸變實例Demo（一）