如何使用 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