對(duì)頁(yè)面來(lái)說(shuō)文字就是靈魂，因此美化文字的工作必不可少。除了加載漂亮的字體外，還可以用text-shadow文本陰影給枯燥的文字增加美感。
按例先看一下基本參數(shù)：
x-offset / y-offset：必須的參數(shù)。水平和垂直陰影的偏移量。正值表示往x軸y軸正方向偏移（即往右往下）。負(fù)值反過(guò)來(lái)往x軸y軸反方向偏移（即往左往上）。
blur-radius：陰影模糊半徑。該參數(shù)可選，默認(rèn)值為0表示不模糊，值越大，陰影的邊緣就越模糊。值不能為負(fù)數(shù)。
color：陰影顏色。該參數(shù)可選，不設(shè)就取瀏覽器的默認(rèn)色。因?yàn)楦鳛g覽器的默認(rèn)色不同，推薦還是設(shè)一下，設(shè)一下又不會(huì)懷孕。
完整的語(yǔ)法box-shadow: [x-offset y-offset blur-radius color]+ 熟悉正則表達(dá)式的能看懂后面+號(hào)表示可以設(shè)多個(gè)陰影。參數(shù)比較簡(jiǎn)單，是box-shadow的子集，權(quán)威請(qǐng)參照W3C。我們舉幾個(gè)例子來(lái)試試美化文字。
雖然現(xiàn)在流行扁平化，但擬物化的3D效果仍舊很普遍，凸起的文字能體現(xiàn)出立體感。
body {
font: 4em/1 Rockwell,"微軟雅黑",serif;
color: white;
}
.font3d {
padding: .25em;
background: #58a;
text-shadow: 0 1px hsl(0,0%,85%),
0 2px hsl(0,0%,80%),
0 3px hsl(0,0%,75%),
0 4px hsl(0,0%,70%),
0 5px hsl(0,0%,65%),
0 5px 10px black;
}
<p class="font3d">CSS3D</p>
代碼中文本陰影以Y軸往下1px為單位逐漸變淡，使扁平化的文字顯示出3D的效果。最后底部加一次外擴(kuò)10px的黑色陰影，使3D效果更加逼真。
順著這個(gè)思路還可以將底部黑色陰影去掉，背景換一個(gè)色彩，設(shè)計(jì)出復(fù)古風(fēng)：
.oldStyle {
padding: .25em;
background: hsl(0, 50%, 45%);
text-shadow: 1px 1px black,
2px 2px black,
3px 3px black,
4px 4px black,
5px 5px black,
6px 6px black,
7px 7px black,
8px 8px black;
}
<p class="oldStyle">Rock & Roll</p>
設(shè)x-offset / y-offset能出現(xiàn)3D效果，不設(shè)偏移量，只設(shè)陰影半徑可以模擬高亮文字效果：
.glow {
padding: .25em;
background: #203;
text-shadow: 0 0 .1em,
0 0 .2em;
}
<p class="glow">Hollywood</p>
凹陷效果的文字會(huì)產(chǎn)生一種石刻字的效果。實(shí)現(xiàn)方法：先給文字和背景色使用相同的色相和飽和度，但亮度不同。背景色的亮度高，產(chǎn)生淺色效果，文字的亮度低，產(chǎn)生暗色效果。原理是生活中光源總是在我們頭上，所以凹陷進(jìn)去部分接觸到的光源偏少會(huì)呈現(xiàn)暗色。接著給文字加上白色投影來(lái)打亮邊緣，使凹陷效果更逼真。
.depressed {
padding: .25em;
background: hsl(210, 13%, 60%);
color: hsl(210, 13%, 30%);
text-shadow: 0 1px 1px hsla(0,0%,100%,.8);
}
<p class="depressed">Rosetta</p>
將上例文字和背景色的亮度值互換，再將亮邊緣投影變暗，就能呈現(xiàn)凸起文字的效果。
.projections {
padding: .25em;
background: hsl(210, 13%, 30%);
color: hsl(210, 13%, 60%);
text-shadow: 0 -1px 1px black;
}
<p class="projections">Rosetta</p>
