前端開發(fā)工作中遇到的文本有很多特效，比如漸變色、描邊、帶漸變色的描邊、文字外發(fā)光、投影等等?，F(xiàn)在總結(jié)一些經(jīng)驗(yàn)，方便以后使用。
Tips: 以下方法并沒有考慮兼容性，僅在chrome下測(cè)試。
text-shadow
利用 text-shadow實(shí)現(xiàn)文字描邊，仔細(xì)一想是不是很酷？我們給文字加一圈不模糊的陰影，不就是在給文字描邊嗎？具體可以這樣操作：
<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;
}
一個(gè)可愛的描邊效果誕生了：
這還沒完，如果我們想描得粗一點(diǎn)呢？比如3px的描邊：
不對(duì)勁欸，描出來(lái)的邊不可導(dǎo)，哦不，不連續(xù)。不過(guò)換個(gè)角度，我們也創(chuàng)造了一種神奇的效果，類似像素風(fēng)?？磥?lái)，
text-shadow 比較適合1px 這種比較難用肉眼去分辨文字拐角是否連續(xù)的描邊效果。
-webkit-text-stroke
說(shuō)到描邊，可以使用已有的CSS描邊屬性，CSS標(biāo)準(zhǔn)里還沒有，只有帶瀏覽器前綴的屬性：-webkit-text-stroke。如果你需要考慮瀏覽器的兼容性，就不要考慮用這個(gè)屬性了，IE瀏覽器是不支持的。
當(dāng)我們使用了這個(gè)屬性，可能會(huì)發(fā)現(xiàn)文本變瘦了，好像描邊擠到了文本內(nèi)容。為了研究
-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);
}
描邊的時(shí)候，瀏覽器是會(huì)沿著文本的外沿，以外沿邊界為中心，左右對(duì)稱的渲染描邊效果。也就是說(shuō)，如果描邊的寬度是2px，那么文本外被描到1px，文本內(nèi)被描到1px。所以文本的描邊會(huì)占用文本本身，也就會(huì)讓文本看起來(lái)變瘦。這種描邊有時(shí)候并不是我們想要的效果，如何在文本外進(jìn)行描邊而不占用文本本身呢？這個(gè)時(shí)候就可以使用增強(qiáng)版的-webkit-text-stroke描邊技術(shù)。
我們需要把它的顏色設(shè)置成透明。如果僅進(jìn)行如此操作，文本沒有任何變化，還需要借助-webkit-background-clip屬性。這個(gè)屬性的取值有很多，這里用到了text。-webkit-background-clip:text; 這樣使用可以讓背景色的顯示區(qū)域剪裁成前景中文本的形狀。當(dāng)文本是透明的時(shí)候，就能顯示出背景色了。干巴巴地說(shuō)，還是無(wú)法顯露出這種方法的精髓，現(xiàn)在上個(gè)例子：
先給文本設(shè)置一個(gè)透明色描邊：
.demo2 {
-webkit-text-stroke: 16px rgba(0, 0, 0, 0);
}
再給文本區(qū)域設(shè)置漸變背景色：
.demo2 {
-webkit-text-stroke: 16px rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(-86deg, #eef85b 5%, #7aec8d 53%, #09e5c3 91%);
}
有點(diǎn)意思了，然后把背景色的顯示區(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;
}
哦了，無(wú)形中制作出了漸變色描邊效果，描邊寬度 8px。而且也能意識(shí)到，描邊是文本的一部分。把漸變色背景改成純色或者圖片，大家應(yīng)該能想象到效果吧。
如果我們?cè)俣嗉右粋€(gè)CSS樣式：
-webkit-text-fill-color: transparent;，又會(huì)變成什么效果呢？答案馬上揭曉：
文字太粗了？沒事兒，把描邊樣式刪掉就可以變成正常寬度的這種漸變文字效果了。無(wú)形中又增加了奇怪的技能。
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.
非常有用的一個(gè)屬性，比如上面我們提到的text-shadow實(shí)現(xiàn) 3px 描邊會(huì)比較尷尬，但是用這個(gè)屬性就再也不用擔(dān)心了：
CSS代碼如下：
.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()用來(lái)實(shí)現(xiàn)外發(fā)光也超nice，當(dāng)然也可以使用text-shadow。
