如何使用 CSS3 添加投影

1、如何使用 CSS3 添加投影本主题将向你介绍如何使用 Windows Internet Explorer 9 和 Cascading Style Sheets, Level 3 (CSS3) 向布局元素的外部或内部添加投影。你甚至可以为使用 Internet Explorer 9 中新提供的圆角支持所创建的圆角曲线添加阴影。本主题包含下列部分：方框阴影选项和语法投影通过 box-shadow 属性启用。像圆角一样，Internet Explorer 9 中的投影功能非常强大；你有多个可以指定的选项。box-shadow 属性中值的顺序

2、如下所示：box-shadow: hoff voff bd sd color inset;这里，hoff 指示水平偏移，voff 指示垂直偏移，bd 指示模糊距离，sd 指示扩散距离，color 指示阴影的颜色，inset 是一个关键字，在使用时指示阴影是内部阴影，而不是外部阴影。前两个值是属性工作所必需的值，所有值都必须按照列出的顺序指定。如果未指定颜色，则 Internet Explorer 9 使用黑色作为阴影颜色。此处定义了每个值：· horizontal offset 此长度值是必需的。它指定阴

3、影向右（正值）或向左（负值）延伸的距离。有关视觉解释，请参阅以下图示；hoff 指示水平偏移，设置为 20 像素。· vertical offset 此长度值是必需的。它指定阴影向下（正值）或向上（负值）延伸的距离。有关视觉解释，请参阅以下图示；voff 指示垂直偏移，设置为 20 像素。· blur distance 此正长度值指示阴影边缘的模糊程度，即模糊起点和终点之间大约的距离。值越高越模糊。有关视觉解释，请参阅以下图示；bd 指示模糊距离，设置为 30 像素。· spread distance 此

4、长度值指示阴影形状在各个方向扩展（正值）或收缩（负值）的程度。此值表示阴影在各个方向将延伸超过原始图形尺寸的距离。有关视觉解释，请参阅以下图示；sd 指示扩散距离，设置为 30 像素。原始偏移边框形状显示为虚线，以使你能更好地显现从原始偏移边框开始的扩散。· color 此 css颜色值指示阴影的颜色。下图演示的 box-shadow 属性与前一图示具有相同的值，但在末尾附加了颜色“gray”。（此值还可以是 #808080 以指定相同的颜色；还支持十六进制颜色值。）要点  尽管万维网联合会 (W3C) 的css3背景和边框规范不指定

5、某个颜色是必需的，但在 box-shadow 属性（或其相应的特定于供应商的变体）外部保留颜色值可能不会跨浏览器生成完全相同的结果。因此，我们建议始终在 box-shadow 属性中指定颜色值。· inset 如果使用此关键字，它会将投影从外部阴影更改为内部阴影。下图说明了 box-shadow 属性具有与扩散距离说明（此部分中的第二个说明）相同的值，但在结尾附加了 inset 关键字。创建基本投影从方框延伸几像素、带有轻微模糊的灰色阴影可能是最简单也最常见的投影。让我们将这个投影应用于我们从如何使用css3添加圆角主题得到的咖啡公司示例。我们可以向页眉

6、和页脚添加轻微的阴影，以使其在视觉上更生动有趣。在我们完成如何使用 CSS3 添加圆角之中的工作后，header ID 选择器的级联样式表 (CSS) 如下所示：#header padding-top: 10px; background-color: #FFFFCC; border-top-left-radius: 50px 30px; border-top-right-radius: 50px 30px;footer ID 选择器的 CSS 如下所示：#footer font-style: italic; color: #999999; padding: 10px; fo

7、nt-size: 10px; clear: both; background-color: #FFFFCC; border-bottom-left-radius: 15px 25px; border-bottom-right-radius: 15px 25px;让我们添加一个阴影，它具有 5 像素的垂直和水平偏移，再加上 5 像素的轻微模糊，无扩散。对于颜色，我们将指定浅灰色。为此，我们向两个选择器添加以下行： box-shadow: 5px 5px 5px lightgray;记住，如果不指定 box-shadow 属性的第四个值，则是在有效地指定不应有扩散。这样，前一行与下面这行相同： b

8、ox-shadow: 5px 5px 5px 0px lightgray;在两个方框上指定投影后，页眉的右部将如下所示：页脚的右部如下所示：使用投影创建“发光”效果只需将 box-shadow 属性中的前两个值设置为零，即可向方框应用“发光”效果。例如，让我们看一下如何使用 CSS3 添加圆角主题中的咖啡公司示例的产品缩略图。product_thumb 类选择器的 CSS 是：.product_thumb clear: left; height: 80px; width: 80px; margin-right: 10px; padding: 5px; float: left; bor

9、der-width: 1px; border-color: #7f7f7f; border-style: dashed; border-radius: 5px;让我们向该方框添加投影，但将两个偏移值保留为零。我们将向它添加轻微模糊、轻微扩展（通过将阴影从原始边框延伸开来使模糊变得更加明显），并将其设置为赭色以增强咖啡豆的颜色： box-shadow: 0 0 5px 5px sienna;这将使缩略图如下所示：创建内部投影最后，让我们向侧栏添加内投影。sidebar ID 选择器的 CSS 是：#sidebar font-size: 12px; padding: 15px; marg

10、in: 10px 10px 10px 75%; border-style: dashed; border-color: #996600; border-width: 5px; border-radius: 10em 0 5em 2em;让我们更改边框的颜色和样式，以更好的与新投影协调。我们将 border-style 属性更改为纯色，将 border-color 属性更改为 #663300 以与导航栏链接和其他界面元素匹配，并使阴影颜色与页眉和页脚背景 (#FFFFCC) 匹配，以获得某些视觉一致性。这样，新选择器为：#sidebar font-size

11、: 12px; padding: 15px; margin: 10px 10px 10px 75%; border-style: solid; border-color: #663300; border-width: 5px; border-radius: 10em 0 5em 2em; box-shadow: 10px 10px 10px #FFFFCC inset;新边栏如下所示。（图像大小已经减小。）使用其他浏览器创建投影与 border-radius 属性（如在如何使用 CSS3 添加圆角主题中的解释）相同，box-shadow 属性具有来自不同浏览器供应商和版本的

12、各种级别的支持。要确保与其他浏览器或旧版其他浏览器的向后兼容性，最好的方法是参考相应浏览器供应商的网站。根据浏览器和版本，你只需复制带相应的特定于供应商的前缀的 box-shadow 属性。例如，对于最后一节的边栏示例，以下选择器在大多数常用浏览器中将会产生类似的结果：#sidebar font-size: 12px; padding: 15px; margin: 10px 10px 10px 75%; border-style: solid; border-color: #663300; border-width: 5px; border-radius: 10em 0 5em 2em; -m

13、oz-border-radius: 10em 0 5em 2em; -webkit-border-radius: 10em 0 5em 2em; box-shadow: 10px 10px 10px #FFFFCC inset; -moz-box-shadow: 10px 10px 10px #FFFFCC inset; -webkit-box-shadow: 10px 10px 10px #FFFFCC inset;为确保对 box-shadow 的支持和行为，请咨询相应的浏览器供应商的网站：· Mozilla (Firefox)：· WebKit（Safari、Chrome）：· Opera：组织到一起请参见页面经本主题所述的所有更改后的新外观（添加了其他浏览器的特定于供应商的属性