CSS3 text-shadow介绍

对页面来说文字就是灵魂，因此美化文字的工作必不可少。除了加载漂亮的字体外，还可以用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>

CSS3 text-shadow介绍

推荐阅读更多精彩内容