如何使用 CSS3 添加投影添加投影, CSS3CSS3, 投影

本主题向您演示如何使用 Windows Internet Explorer 9 和 层叠样式表 (CSS)，级别 3 (CSS3) 向布局元素的外部或内部添加投影。 您甚至可以为您使用 Internet Explorer 9 中新提供的圆角支持创建的圆角曲线添加阴影。 本主题包含下列部分：

• 方框阴影选项和语法
• 创建基本投影
• 使用投影创建“发光”效果
• 创建内部投影
• 使用其他浏览器创建投影
• 汇总
• 使用旧版 Internet Explorer 创建投影
• 相关主题

方框阴影选项和语法

投影是由 box-shadow 属性启用的。 像圆角一样，Internet Explorer 9 中的投影功能非常强大；您有多个可以指定的选项。 box-shadow 属性中值的顺序如下：

此处，hoff 指示水平偏移，voff 指示垂直偏移，bd 指示模糊距离，sd 指示扩散距离，color 指示阴影颜色，而 inset 是一个关键字，使用时指示阴影为内部阴影，而不是外部阴影。 前两个值是属性工作所必需的值，所有值都必须按照列出的顺序指定。 如果未指定颜色，则 Internet Explorer 9 使用黑色作为阴影颜色。

此处定义了每个值：

• horizontal offset 此长度值是必需的。 它指定阴影向右（正值）或向左（负值）延伸的距离。 有关视觉解释，请参阅以下图示；hoff 指示水平偏移，设置为 20 像素。

• vertical offset 此长度值是必需的。 它指定阴影向下（正值）或向上（负值）延伸的距离。 有关视觉解释，请参阅以下图示；voff 指示垂直偏移，设置为 20 像素。

• blur distance 此正长度值指示阴影边缘的模糊程度，即模糊起点和终点之间大约的距离。 值越高越模糊。 有关视觉解释，请参阅以下图示；bd 指示模糊距离，设置为 30 像素。

• spread distance 此长度值指示阴影形状在各个方向扩展（正值）或收缩（负值）的程度。 此值表示阴影在各个方向将延伸超过原始图形尺寸的距离。 有关视觉解释，请参阅以下图示；sd 指示扩散距离，设置为 30 像素。 原始偏移边框形状显示为虚线，以使您能更好地显现从原始偏移边框开始的扩散。

• color 此 CSS 颜色值指示阴影的颜色。 下图演示的 box-shadow 属性与前一图示具有相同的值，但在末尾附加了颜色“gray”。 （此值还可以为 #808080，指定的是相同的颜色；也支持十六进制颜色值。）

  要点  尽管 CSS3 Backgrounds and Borders（CSS3 背景和边框）的 万维网联合会 (W3C) 规范并未指定必需设置颜色，但如果不为 box-shadow 属性（或其相应的供应商特定变体）指定颜色值，可能无法在浏览器间产生一致的结果。 因此，我们建议始终在 box-shadow 属性中指定一种颜色。

• inset 如果使用此关键字，它会将投影从外部阴影更改为内部阴影。 下图演示了与扩散距离图示（本节第二个图示）具有相同值，但在末尾附加了 inset 关键字的 box-shadow 属性。

创建基本投影

从方框延伸几像素、带有轻微模糊的灰色阴影可能是最简单也最常见的投影。 让我们将这个投影应用于我们从如何使用 CSS3 添加圆角主题得到的咖啡公司示例。 我们可以向页眉和页脚添加轻微的阴影，以使其在视觉上更生动有趣。

在我们完成如何使用 CSS3 添加圆角之中的工作后，header ID 选择器的 层叠样式表 (CSS) 如下所示：

footer ID 选择器的 CSS 如下所示：

让我们添加一个阴影，它具有 5 像素的垂直和水平偏移，再加上 5 像素的轻微模糊，无扩散。 对于颜色，我们将指定浅灰色。 为此，我们向两个选择器添加以下行：

要记得，如果不为 box-shadow 属性指定第四个值，您可以有效地指定阴影无扩散。 这样，前一行与下面这行相同：

在两个方框上指定投影后，页眉的右部将如下所示：

页脚的右部如下所示：

使用投影创建“发光”效果

通过简单地将 box-shadow 属性的前两个值设置为零，您可以对方框应用“发光”效果。

例如，让我们看一下如何使用 CSS3 添加圆角主题中的咖啡公司示例的产品缩略图。 product_thumb 类选择器的 CSS 为：

让我们向该方框添加投影，但将两个偏移值保留为零。 我们将向它添加轻微模糊、轻微扩展（通过将阴影从原始边框延伸开来使模糊变得更加明显），并将其设置为赭色以增强咖啡豆的颜色：

这将使缩略图如下所示：

创建内部投影

最后，让我们向侧栏添加内投影。 sidebar ID 选择器的 CSS 为：

让我们更改边框的颜色和样式，以更好的与新投影协调。 我们会将 border-style 属性更改为 solid，将 border-color 属性更改为 #663300，以与导航条链接和其他界面元素相匹配，并使阴影颜色与页眉和页脚背景的颜色 (#FFFFCC) 匹配，以实现一定的视觉连贯性。 这样，新选择器为：

新边栏如下所示。 （图像大小已经减小。）

使用其他浏览器创建投影

像 border-radius 属性一样（如如何使用 CSS3 添加圆角主题中所述），box-shadow 属性对于不同的浏览器供应商和版本有不同的支持级别。

要确保与其他浏览器或旧版其他浏览器的向后兼容性，最好的方法是参考相应浏览器供应商的网站。 根据浏览器和版本，您may能够使用相应的供应商特定前缀简单地复制 box-shadow 属性。 例如，对于最后一节的边栏示例，以下选择器在大多数常用浏览器中将会产生类似的结果：

若要确定 box-shadow 支持和行为，请参考相应的浏览器供应商网站：

• Mozilla (Firefox)： https://developer.mozilla.org
• WebKit（Safari、Chrome）： http://developer.apple.com/devcenter/safari/
• Opera： http://www.opera.com/docs/specs/

汇总

请参见页面经本主题所述的所有更改后的新外观（添加了其他浏览器的特定于供应商的属性名称） 。 （要下载CSS，请右键单击该链接，然后单击“目标另存为…”。）

使用旧版 Internet Explorer 创建投影

对 box-shadow 属性的支持是 Internet Explorer 9 中的新增功能。 若要向布局添加投影，以便 Windows Internet Explorer 8 和更低版本的用户可以查看它们，您可利用 Web 上提供某一种备用解决方案。

此处列出了几种选项。 （包含任意链接并不表示 Microsoft 对链接站点的认可。）

• A List Apart，CSS Drop Shadows（CSS 投影）： http://www.alistapart.com/articles/cssdropshadows/
• Place Name Here，CSS3 Box Shadow in Internet Explorer [Blur-Shadow]（Internet Explorer 中的 CSS3 方框阴影 [模糊阴影]）： http://placenamehere.com/article/384/css3boxshadowininternetexplorerblurshadow/
• Bing 搜索，“drop shadows internet explorer”： http://www.bing.com/search?q=drop+shadows+internet+explorer