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

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

 

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

 

方框阴影选项和语法

投影是由 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 像素。 原始偏移边框形状显示为虚线,以使您能更好地显现从原始偏移边框开始的扩散。

具有方框阴影的圆角矩形,指定了扩散距离

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

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

具有方框阴影的圆角矩形,指定了颜色

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

具有方框阴影的圆角矩形,指定了 inset 关键字

创建基本投影

从方框延伸几像素、带有轻微模糊的灰色阴影可能是最简单也最常见的投影。 让我们将这个投影应用于我们从如何使用 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 支持和行为,请参考相应的浏览器供应商网站:

汇总

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

使用旧版 Internet Explorer 创建投影

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

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