精通 CSS3 盒子阴影

30 天开发一个 Windows 8 应用

今天，我们将开始学习使用新的 CSS3 模块掌握阴影的艺术。有两种类型：box-shadow 和 text-shadow，分别定义在 CSS3 背景和边框 和 CSS3 文本 模块中。

box 和 text 的工作方式类似——实际上，text-shadow 的定义是参照 box-shadow 的定义编写的，并包含一些例外。在本系列中，我先从 box 阴影开始。

浏览器支持

CSS3 box-shadow 在 IE10 和 IE9（支持 硬件加速）以及其他现代浏览器中都受支持。您也可以在用 HTML/JS 构建的 Windows 8 的 Metro 风格应用 中使用它。

box-shadow

首先，有一点您应该记住：阴影不会增加或减小盒子的大小或其边框。规范说明：

阴影不会触发滚动或增加可滚动区域的大小。

偏移量和颜色

要创建最基本的阴影，您只需要定义规则的前两个参数：阴影的水平和垂直偏移量（1.1）。

box-shadow: 3px 3px;

正值会将阴影向右下移动，负值则向左上移动。

默认情况下，如果您没有指定阴影的颜色，大多数流行浏览器会使用当前上下文的文本颜色（1.2）。（规范在 12 年 2 月更改，之前的版本省略了 box-shadow 的“颜色是 UA 选择的颜色”。因此，您可能会发现某些浏览器具有不同的行为。）

box-shadow: 3px 3px; color:blue;

要设置阴影的颜色，只需在末尾添加颜色值即可（1.3）。

box-shadow: 3px 3px darkgreen;

要定义颜色，您可以使用 CSS3 中的任何可用表示法：#RGB、#RRGGBB，或者使用 rgb() 或 rgba() 以及 hsla() 函数，支持 alpha 通道。hsla 函数在构建复杂示例时非常有用。

模糊

您可以设置的第三个长度是模糊半径——一个正值，定义了阴影边缘的模糊程度（2.1–2.3）。

box-shadow:3px 3px 3px darkgrey;

默认情况下，模糊半径为零，阴影边缘是锐利的。

通过将模糊与阴影的偏移量结合，您可以实现各种效果。在示例（2.3）中，两个偏移量都为零，但由于模糊效果，盒子周围存在阴影。

box-shadow:0 0 9px black;

模糊算法本身并未在规范中定义，但它指出模糊效果应近似于高斯模糊，标准差等于模糊半径的一半。换句话说，这意味着不同用户代理（UA）生成的实际阴影在某些像素上可能有所不同。

扩展

第四个长度用于扩展距离，以扩展或收缩阴影。默认情况下，阴影的大小与盒子的大小相同，但使用扩展距离可以更改它。我还应该指出，此参数是在后期规范版本中引入的，因此您在网上找到的许多过时的教程和示例都不知道它的存在。 " src="https://codeproject.org.cn/script/Forums/Images/smiley_wink.gif" />

要扩展阴影，请设置正的扩展距离（3.1, 3.2）。

box-shadow:6px 6px 0px 4px darkred;

要收缩——使用负值（3.3）。

box-shadow:12px 12px 8px -4px darkred;

定义扩展值时，您可以将其视为阴影缩放操作，但实际算法在规范中以略微复杂的方式定义，使用模糊类比和删除透明或不透明的像素。

在上一个示例（3.4）中，阴影具有向左和向下的 6px 水平垂直偏移量，并且从每侧扩展了 8px。

box-shadow:6px 6px 0 8px grey;

如果您在盒子上使用圆角，请注意，扩展阴影的 border-radius 也将被缩放（3.5）。

内阴影

最后，您可以定义的另一个有趣的修饰符是“inset”关键字，它允许您在盒子里绘制内阴影（4.1-4.4）。

box-shadow:inset 4px 4px rgba(66,66,66,0.5); /* (4.1) */

box-shadow:inset 4px 4px 0 8px rgba(198,198,198,1); /* (4.2) */
box-shadow:inset -2px -2px 8px 0px black; /* (4.3) */
box-shadow:inset 0 0 4px 0px black; /* (4.4) */

请注意，内阴影仅在盒子内部绘制。如果您对内阴影使用正值（扩展）的扩展距离，则意味着收缩阴影的周长形状（4.2）。

多个阴影

马赛克的最后一块：您可以为同一个盒子定义任意数量的阴影，只需将它们用逗号分隔写在同一个规则中。

例如，要创建彩虹阴影（5.1），您只需要写 7 个具有递增扩展距离的阴影。

box-shadow: 0 0 2px 1px red,
            0 0 2px 2px orange,
            0 0 2px 3px yellow,
            0 0 2px 4px green,
            0 0 2px 5px lightblue,
            0 0 2px 6px blue,
            0 0 2px 7px violet;

请注意，阴影效果是按从前到后的顺序应用的。紫色阴影将首先绘制，蓝色阴影在其上方绘制，依此类推……红色阴影最后绘制在其他阴影的顶部，最后——盒子本身及其所有内容。

由于所有阴影都是独立的，您可以轻松地组合具有不同偏移量的阴影（5.2）。

box-shadow: -6px -6px 8px -4px rgba(255,0,0,0.75),
            6px -6px 8px -4px rgba(0,255,0,0.75),
            6px 6px 8px -4px rgba(255,255,0,0.75),
            -6px 6px 8px -4px rgba(0,0,255,0.75);

或组合外阴影和内阴影（5.3）。

box-shadow: inset 0 0 8px lightgray,
            1px 1px 3px
darkgray;

这是一个下划线（或底部阴影）的示例（5.4）。

box-shadow: 0 1px red,
            0 3px 3px -2px black

通过在 :before 和 :after 伪类中添加一些特殊效果和内容，您可以创建由 Matt Hamm 描述的炫酷盒子（5.5）。

.slick-box {
    position: relative;
    height: 50px;
    border: 1px solid #efefef;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}
 
.slick-box:before, .slick-box:after {
    content: '';
    z-index: -1;
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 70%;
    max-width: 300px; /* avoid
rotation causing ugly appearance at large container widths */
    height: 55%;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    transform: skew(-15deg) rotate(-6deg);                

}
            
.slick-box:after {
    left: auto;
    right: 10px;
    transform: skew(15deg) rotate(6deg);                

}

（为简化代码，我删除了所有供应商前缀，但尝试重现时，您应该使用所有这些 -ms-transform、-webkit-transform 等。）

通用语法

总结一下，box-shadow 的通用语法如下：

box-shadow:
<shadow> [ , <shadow> ]*;
<shadow>
= inset? && [ <length>{2,4} && <color>? ] 

完整版本中的最后一个规则表示：

box-shadow: inset?
h-offset v-offset blur-radius spread-distance color;

模糊半径和扩展距离可以省略。inset 关键字可以将阴影从外部切换到内部。

交互式示例

如果您希望以交互方式玩转阴影，我的同事们在去年九月为 Build 大会 创建了一个很棒的演示：“动手实践：box-shadow”。

注意事项

本文讨论的 CSS 属性定义在 CSS3 背景和边框 模块中，该模块目前处于工作草案状态。虽然它似乎相当稳定，但在细节上仍可能发生变化。