先上一張效果圖，大家看看

一般都是用text-shadow來給文字加陰影的。

.text{
 font:100px "微軟雅黑";
 font-weight:bold;
 text-shadow: 1px 2px 3px rgba(67,8,7,0.8); 
color:#c60df0;
}

單純投影效果

我還想要文字顏色漸變呢？來個最簡單的從上到下：
常用方法:mask-image

.text{
 font:100px "微軟雅黑";
 font-weight:bold;
text-shadow: 1px 2px 3px rgba(67,8,7,0.8); 
color:#c60df0;
-webkit-mask-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.9)), color-stop(40%, rgba(0, 0, 0, 0.5)),to(rgba(0, 0, 0, 0))); 
}

單純漸變色

哇，好單調(diào)，能不能漸變的色彩豐富一些？你自己去-webkit-gradient()中慢慢調(diào)吧，心累，不弄了。我先使用偽元素來再增加一個字體顏色，來看漸變效果容易些。下面是使用偽元素漸變的效果。

.text{
 font:100px "微軟雅黑";
 font-weight:bold;
 position:relative;
text-shadow: 1px 2px 3px rgba(67,8,7,0.8); color:#c60df0;
}
.text:after{ 
position:absolute;
 left:0px; 
content:"好奇心"; 
color:#ea0000; 
-webkit-mask-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.9)), color-stop(40%, rgba(0, 0, 0, 0.5)),to(rgba(0, 0, 0, 0))); 
text-shadow:0px 0px 2px rgba(234,0,0,1);
}

好丑陋的顏色

說好的高亮呢？看如下代碼(省去文字顏色漸變效果)

.text{
 font:100px "微軟雅黑";
 font-weight:bold;
text-shadow: 1px 2px 3px rgba(67,8,7,0.8); 
color:#c60df0;
position:relative;
}
.text:before{content:"好奇心";
text-shadow:0px 0px 5px rgba(255,255,255,0.8);
 position:absolute; left:0px; 
 color:rgba(0,0,0,0);
}

當(dāng)前效果

所以需要思考的來了：白色是怎么出現(xiàn)在文字內(nèi)部的？
可以先簡單看一下將before中的position去掉的情況：

before中去掉position

這樣看起來就顯而易見了，應(yīng)用before的文字為白色，邊緣有透明度，而且應(yīng)用了position:absolute，浮于原來文字之上，而周邊的透明度漏出了原來text的底色，看起來就好像是內(nèi)部發(fā)光了。

那么：此時的color必須用rgba樣式嗎?
是這樣的。
先拋出個有意思的問題：rgba(0,0,0,0),其中的a代表的是透明度。當(dāng)a=1時完全透明，a=0時不透明，那么文字也就不可見了。但是，當(dāng)加上text-shadow之后，text就耐不住寂寞的又顯示出來了，而且穿上了text-shadow帶來的顏色的外衣！這個還是挺讓我費解的text-shadow和text的顏色一定有勾結(jié)?。?！

因為一般的高亮效果內(nèi)部顏色都是白色的，所以這兒使用rgba()，a的透明度要寫的小一點才更逼真，并且用透明度的最大作用就是讓文字的邊緣部分可以透明點露出正常文本的顏色，也就是所謂的描邊效果。這樣里外的顏色一對比，就顯得是高亮了。

最終效果圖

額，顏色搭配真是丑到?jīng)]朋友。。。
這時候不得不把漸變色用到一個偽元素after（這樣就省了添加z-index的麻煩）中，使其顯示在最上層，不被覆蓋。層疊順序由低到高依次是正常文本——>before——>after。

遺留問題：
1、text-shadow中的顏色和color的貓膩
2、屬性的兼容性
3、應(yīng)用場景：先附上兩個應(yīng)用mask-image的案例：http://web.jobbole.com/84766/
http://www.w3cplus.com/demo/681.html