掌握CSS阴影技巧：一分钟课堂第二讲

"不止"一分钟课堂：CSS详解-探索阴影的全貌。

·第一讲：我们学习了box-shadow，inset，x偏移，y偏移，模糊半径，扩散半径。颜色：让我们继续text-shadow文本阴影，没有内阴影、扩散半径，也缺少了裁切的特性，但同时也为我们提供了更多可能性。这是一个文本，给它一个初始值都为0的阴影。

·text-shadow将阴影的x，y轴偏移，得到一个简单带阴影的文本。text-shadow：0.04em0.04em0.08em#1CCCFF，增加文本透明度，得到一个有重影的文本。

·将文本颜色调整为背景颜色，同时为文本增加模糊半径可以得到一个背光文字。再为文本增加一个笔触，我们得到一个很酷的文字效果。再叠加一层阴影，用动画放大缩小阴影扩散的面积，可以得到一个类似呼吸灯的效果。

·如果还不够，为文本加上一个条纹渐变背景，使用-webkit-background-clip：text，为背景加上滚动动画。好麻烦！差不多了。

说好讲阴影的？怎么开始做动画了？做都做了也别浪费吧。filter：drop-shadow()投影会忽视透明部分，就像这样，并且投影对阴影同样有效果。盒子的投影不会像阴影一样被裁切。这样也可以使用投影为半透明的盒子做背光效果。

·三种阴影从上往下依次为文本阴影、盒子阴影、投影，合理地使用组合它们，你可以创造不可思议的阴影效果。