前端開發(fā)工作中遇到的文本有很多特效，比如漸變色葵蒂、描邊交播、帶漸變色的描邊、文字外發(fā)光践付、投影等等∏厥浚現(xiàn)在總結(jié)一些經(jīng)驗，方便以后使用永高。
Tips: 以下方法并沒有考慮兼容性隧土，僅在chrome下測試。

text-shadow

利用 text-shadow實現(xiàn)文字描邊命爬，仔細一想是不是很酷曹傀？我們給文字加一圈不模糊的陰影，不就是在給文字描邊嗎遇骑？具體可以這樣操作：

<span class="demo1">Hello</span>

.demo1 {
  font-size: 100px;
  font-weight: 800;
  color: #232d2d;
  text-transform: uppercase;
  text-shadow: 1px 0 0 #eef85b, 0 1px 0 #eef85b, -1px 0 0 #eef85b, 0 -1px 0 #eef85b;
}

一個可愛的描邊效果誕生了：

text-shadow描邊效果

3px text-shadow描邊效果

-webkit-text-stroke

說到描邊，可以使用已有的CSS描邊屬性暂氯，CSS標準里還沒有潮模，只有帶瀏覽器前綴的屬性：-webkit-text-stroke。如果你需要考慮瀏覽器的兼容性痴施，就不要考慮用這個屬性了擎厢，IE瀏覽器是不支持的究流。

瀏覽器對 -webkit-text-stroke 的兼容性

-webkit-text-stroke 簡單使用

CSS代碼如下：

.demo2 {
  font-size: 200px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  -webkit-text-stroke: 16px rgba(0, 0, 0, 0.5);
}

描邊的時候，瀏覽器是會沿著文本的外沿绵估，以外沿邊界為中心炎疆，左右對稱的渲染描邊效果。也就是說国裳，如果描邊的寬度是2px形入，那么文本外被描到1px，文本內(nèi)被描到1px缝左。所以文本的描邊會占用文本本身亿遂，也就會讓文本看起來變瘦。這種描邊有時候并不是我們想要的效果渺杉，如何在文本外進行描邊而不占用文本本身呢蛇数？這個時候就可以使用增強版的-webkit-text-stroke描邊技術(shù)。
我們需要把它的顏色設置成透明是越。如果僅進行如此操作耳舅，文本沒有任何變化，還需要借助-webkit-background-clip屬性倚评。這個屬性的取值有很多浦徊，這里用到了text。-webkit-background-clip:text; 這樣使用可以讓背景色的顯示區(qū)域剪裁成前景中文本的形狀天梧。當文本是透明的時候盔性，就能顯示出背景色了。干巴巴地說呢岗，還是無法顯露出這種方法的精髓冕香，現(xiàn)在上個例子：
先給文本設置一個透明色描邊：

.demo2 {
  -webkit-text-stroke: 16px rgba(0, 0, 0, 0);
}

設置成透明色描邊

再給文本區(qū)域設置漸變背景色：

.demo2 {
  -webkit-text-stroke: 16px rgba(0, 0, 0, 0);
  background: -webkit-linear-gradient(-86deg, #eef85b 5%, #7aec8d 53%, #09e5c3 91%);
}

文本區(qū)域設置漸變背景色

有點意思了，然后把背景色的顯示區(qū)域剪裁成前景中文本的形狀：

.demo2 {
  -webkit-text-stroke: 16px rgba(0, 0, 0, 0); 
  background: -webkit-linear-gradient(-86deg, #eef85b 5%, #7aec8d 53%, #09e5c3 91%); 
  -webkit-background-clip: text;
}

背景色的顯示區(qū)域剪裁成前景中文本的形狀

揭曉答案

filter:drop-shadow()

This function is somewhat similar to the box-shadow property. The box-shadow property creates a rectangular shadow behind an element's entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself.

非常有用的一個屬性茫打，比如上面我們提到的text-shadow實現(xiàn) 3px 描邊會比較尷尬居触，但是用這個屬性就再也不用擔心了：

3px drop-shadow() 描邊效果

.demo3 {
  font-size: 100px;
  font-weight: 800;
  color: #232d2d;
  text-transform: uppercase;
  filter: drop-shadow(3px 0 0 #eef85b) drop-shadow(-3px 0 0 #eef85b)
    drop-shadow(0 3px 0 #eef85b) drop-shadow(0 -3px 0 #eef85b);
}

drop-shadow()用來實現(xiàn)外發(fā)光也超nice，當然也可以使用text-shadow老赤。

文字外發(fā)光效果