对页面来说文字就是灵魂，因此美化文字的工作必不可少。除了加载漂亮的字体外，还可以用text-shadow文本阴影给枯燥的文字增加美感。
按例先看一下基本参数：
x-offset / y-offset：必须的参数。水平和垂直阴影的偏移量。正值表示往x轴y轴正方向偏移（即往右往下）。负值反过来往x轴y轴反方向偏移（即往左往上）。
blur-radius：阴影模糊半径。该参数可选，默认值为0表示不模糊，值越大，阴影的边缘就越模糊。值不能为负数。
color：阴影颜色。该参数可选，不设就取浏览器的默认色。因为各浏览器的默认色不同，推荐还是设一下，设一下又不会怀孕。
完整的语法box-shadow: [x-offset y-offset blur-radius color]+ 熟悉正则表达式的能看懂后面+号表示可以设多个阴影。参数比较简单，是box-shadow的子集，权威请参照W3C。我们举几个例子来试试美化文字。
虽然现在流行扁平化，但拟物化的3D效果仍旧很普遍，凸起的文字能体现出立体感。
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的效果。最后底部加一次外扩10px的黑色阴影，使3D效果更加逼真。
顺着这个思路还可以将底部黑色阴影去掉，背景换一个色彩，设计出复古风：
.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>
设x-offset / y-offset能出现3D效果，不设偏移量，只设阴影半径可以模拟高亮文字效果：
.glow {
padding: .25em;
background: #203;
text-shadow: 0 0 .1em,
0 0 .2em;
}
<p class="glow">Hollywood</p>
凹陷效果的文字会产生一种石刻字的效果。实现方法：先给文字和背景色使用相同的色相和饱和度，但亮度不同。背景色的亮度高，产生浅色效果，文字的亮度低，产生暗色效果。原理是生活中光源总是在我们头上，所以凹陷进去部分接触到的光源偏少会呈现暗色。接着给文字加上白色投影来打亮边缘，使凹陷效果更逼真。
.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>
将上例文字和背景色的亮度值互换，再将亮边缘投影变暗，就能呈现凸起文字的效果。
.projections {
padding: .25em;
background: hsl(210, 13%, 30%);
color: hsl(210, 13%, 60%);
text-shadow: 0 -1px 1px black;
}
<p class="projections">Rosetta</p>
