阴影

边框阴影

box-shadow 是标准的 CSS 属性，它可以包含多个值：

box-shadow: 5px 5px 3px 1px #999

• 第一个值是水平偏移——阴影向右（如果为负则向左）移动的距离。
• 第二个值是垂直偏移——阴影向下（如果为负则向上）移动的距离。
• 第三个值是模糊半径——值越高，阴影越不锐利（“0”表示绝对锐利）。此项是可选的，省略相当于设置为“0”。
• 第四个值是扩展距离——值越高，阴影越大（“0”表示边框的继承大小）。此项也是可选的，省略相当于设置为“0”。
• 第五个值是颜色。这也是可选的。

内阴影

你还可以通过在列表中添加“inset”来为边框内部应用阴影。

box-shadow: inset 0 0 7px 5px #ddd;

太棒了！

文本阴影

顾名思义，box-shadow 只关注边框。真是个善变的家伙。但是，你也可以（意想不到吧！）使用 text-shadow 为文本轮廓应用阴影。

text-shadow: -2px 2px 2px #999;

与 box-shadow 类似：

• 第一个值是水平偏移。
• 第二个值是垂直偏移。
• 第三个值是模糊半径（可选）。
• 第四个值是颜色（可选，但省略此项会使阴影颜色与文本颜色相同）。

请注意，text-shadow 没有扩展距离或 inset 选项。