之前客戶提的新需求中有文字漸變效果加文字描邊效果，之前隻用過單一的，但是組合起來就爆掉了，各種嘗試找出了一種完美解決方案。
第一步，實現文字漸變
這裡要用一種 CSS3新出的 屬性： background-clip: text
background-clip 的定義：規定背景的繪制區域；簡而言之，background-clip 就是規定background-color/background-image 背景（色/圖）在盒模型裡的作用範圍...
那麼使用了 background-clip: text 這個屬性的意思是，以區塊内的文字作為裁剪區域向外裁剪，文字的背景即為區塊的背景，文字之外的區域都将被裁剪掉。
知道了這個特性之後，我們把背景設為圖片背景或者漸變背景之後在隻用這個屬性就可以得到一個背景文字效果或者漸變文字效果！
eg :
背景圖
background-clip: text 轉背景文字效果:
漸變效果：
實現了 漸變文字之後我們就該實現文字外邊框了：
第二步，實現文字描邊-webkit-text-stroke
CSS屬性為文本字符指定了寬 和 顔色 . 它是-webkit-text-stroke-width 和-webkit-text-stroke-color 屬性的縮寫。
- text-stroke-width： 設置或檢索對象中的文字的描邊厚度。
- text-stroke-color：設置或檢索對象中的文字的描邊顔色。
雖然-webkit-text-stroke是webkit内核浏覽器的私有屬性，但是FireFox也支持這個樣式，唯獨IE浏覽器不支持。所以在移動端是可以放心使用這個屬性的。
如圖所示，-webkit-text-stroke的第一個字段設置描邊的寬度，第二個設置描邊的顔色。
實現漸變文字描邊
兩種屬性配合使用便可。
ps: text-shadow, border 是無法做到漸變的同時進行描邊的。。。
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
