如何使用 CSS3 添加投影



本主题将向你介绍如何使用 Windows Internet Explorer 9 和 Cascading Style Sheets, Level 3 (CSS3) 向布局元素的外部或内部添加投影。你甚至可以为使用 Internet Explorer 9 中新提供的圆角支持所创建的圆角曲线添加阴影。本主题包含下列部分：

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

方框阴影选项和语法

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


box-shadow: hoff voff bd sd color inset;

这里，

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 以指定相同的颜色；还支持十六进制颜色值。） 要点  尽管万维网联合会 (W3C) 的 CSS3 背景和边框规范不指定某个颜色是必需的，但在 box-shadow 属性（或其相应的特定于供应商的变体）外部保留颜色值可能不会跨浏览器生成完全相同的结果。因此，我们建议始终在 box-shadow 属性中指定颜色值。
  • inset 如果使用此关键字，它会将投影从外部阴影更改为内部阴影。下图说明了 box-shadow 属性具有与扩散距离说明（此部分中的第二个说明）相同的值，但在结尾附加了 inset 关键字。

创建基本投影

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

在我们完成如何使用 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;
    font-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 属性的第四个值，则是在有效地指定不应有扩散。这样，前一行与下面这行相同：


box-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;
    border-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;
    margin: 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: 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 属性具有来自不同浏览器供应商和版本的各种级别的支持。

要确保与其他浏览器或旧版其他浏览器的向后兼容性，最好的方法是参考相应浏览器供应商的网站。根据浏览器和版本，你只需复制带相应的特定于供应商的前缀的 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;
    -moz-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 的支持和行为，请咨询相应的浏览器供应商的网站：

组织到一起

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

使用旧版 Windows Internet Explorer 创建投影

Internet Explorer 9 中现在支持 box-shadow 属性。若要向布局添加投影，以便 Windows Internet Explorer 8 和更低版本的用户可以查看它们，你可利用 Web 上提供的备用解决方案之一。

此处列出了几种选项。（包含任何链接并不意味着 Microsoft 认可链接的网站。）

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