css文件漸變雖然兼容性比較差，但是用在移動端和chrome中還是沒有問題的。
實現文件漸變的方法有兩種
1. 使用 background 的屬性
2. 使用 mask 屬性
方式一、
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> span { font-size: 30px; background: linear-gradient(to right, red, blue); -webkit-background-clip: text; color: transparent; } </style> </head> <body> <span>Hello world</span> </body> </html>
效果如下
代碼也是非常簡單：
background: liner-gradient(to right, red, blue); 這個就是設置背景色，這是是background-image的簡寫，不是backround-color
-webkit-background-clip: text; 這個屬性在 W3School 上有明確解釋
但是並沒有text 屬性，所以這個只能在chrome上看到效果，在其他瀏覽器沒有實現，它的兼容性就有很大的問題了
方式二、
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <style type="text/css"> h1{ position: relative; color: yellow; } h1:before{ content: attr(data-text); position: absolute; z-index: 10; color:pink; -webkit-mask:linear-gradient(to left, red, transparent ); } </style> </style> </head> <body> <h1 data-text="hello world">hello world</h1> </body>
效果如下
參考 簡單說 CSS中的mask—好好利用mask-image
張鑫旭： 小tip:CSS3下的漸變文字效果實現