今天去css-tricks無意間發現了標題運用漸變文字這一效果，這使的想起了webkit核心瀏覽器的一些私有屬性。而實現漸變文字這一特效可以借助webkit瀏覽器的兩個私有屬性-webkit-mask-image與-webkit-background-clip。
既然稱之為webkit私用屬性，我想大家都懂的，要用webkit核心瀏覽器才能看到效果。chrome/safari，這兩個瀏覽器都可以的。
mask-image，從表層文字來看，mask為遮罩的意思，在這裡就是給乙個元素新增蒙板，配合漸變色來剪輯出你想要的漸變字型效果。而background-clip，這個也是類似的含義，不多做說明了。
在css-tricks裡，通過以下**發現，它的這種漸變效果運用的是後者，也更具多樣化（這裡下面會再做補充）。
這裡是來自css-tricks的預覽效果
標題文字（預設）： 標題文字（滑鼠經過）：
舉個簡單地例子來加以說明吧：
1、-webkit-mask-image
html：
-webkit-mask-image
css:
.wrd1 {
width:800px;
font:bold 3em arial,helvetica,sans-serif;
color:#800;
position:relative;
.wrd1:before {
content:'text-file-color 1';
color:#f00; /*設定字型色值*/
position:absolute;
left:1px;
z-index:2;
-webkit- mask-image:-webkit- gradient(linear,0 0,0 100%,from(rgba(255,0,0,1)),to(rgba(0,0,255,0))); /* 新增漸變蒙板*/
預覽效果：
以上，新增注釋的兩個屬性為關鍵屬性。漸變蒙板的設定一般是從乙個不透明色到透明色的漸變過渡（即opacity值的變化），這裡不論你設定什麼顏色都將以「不透明--半透明--透明」來顯示。
或許你會覺得奇怪，為什麼我在「.wrd1:before」裡設定漸變蒙板，而不是直接在.wrd1中設定?其實這裡的content:'text-file-color'; ，是相當於把文字複製了一層出來。上面說了，漸變蒙板實現的是一種「透明-半透明-不透明」的文字效果，我們需要實色的文字，就把這兩個文字重疊到一起，含有透明的放在上方就可以了……
要注意的是：漸變顏色值中必須有透明色值才能實現此效果。
2、-webkit-background-clip
html:
-webkit-mask-image
css:
.wrd2 {
width:800px;
font:bold 3em arial,helvetica,sans-serif;
color:transparent; /*將字型設定為透明色*/
background:-webkit-gradient(linear,0 0,0 100%,from(#f00),to(#800)); /*漸變背景*/
-webkit-background-clip:text; /*剪輯背景*/
預覽效果：
css3 製作漸變
先了解一下目前的幾種現代瀏覽器的核心，主流內容主要有 mozilla gecko 熟悉的有firefox，flock等瀏覽器 moz webkit 熟悉的有safari chrome等瀏覽器 webkit opera presto opera瀏覽器 o trident ie瀏覽器 線性漸變 line...
css3 漸變（從左到右 從上至下） 文字漸變
從左到右 background linear gradient to right,b0a3e8,4d447b 如果三種顏色 background linear gradient to right,b0a3e8,8374c5,4d447b 兩種顏色效果如圖 從上之下 background webkit...
CSS3實現文字流光漸變特效
先上個效果圖 下面先上 html部分 日暮蒼山遠，天寒白屋貧。柴門聞犬吠，風雪夜歸人。css部分 其實這是乙個挺簡單的小例子，屬性的作用在這裡就不多說，因為文件都能查的到，我在這裡主要說一說思路。1 linear gradient屬性給文字加乙個線性漸變的背景色 2 transparent 將文字設...