?

对 Web 设计师而言，CSS3 将带来许多全新的机会。现在，您可以使用 CSS3 来添加阴影、渐变、旋转和某些字体 —— 这一切都不需要用到减慢网页速度的图像。这个小节介绍一些新的、令人激动的特性，您可以直接使用它们而不会导致跨浏览器问题。Web 设计师可以将更多时间用于创建吸引眼球的网站，而不是致力于如何让网站看起来尚可。

使用阴影

阴影给网页添加了维度；以前，阴影效果只能通过图像来实现。使用 CSS3 之后，您可以控制许多细节，包括方向、偏移量、颜色和阴影的平滑度（如?图 3?所示）。清单 8、清单 9?和?清单 10?通过几个例子展示使用 CSS 创建阴影的各种方法。

图 3. 使用 CSS3 呈现阴影
?

在 Firefox 浏览器中使用?-moz-box-shadow?来将阴影应用到元素。您可以为该属性赋予 4 个值。

清单 8. 在 Firefox 中创建阴影

?

-moz-box-shadow: 1px 
1px 4px #666; 

?在 Safari 和 Chrome 中，使用?-webkit- box-shadow?来将阴影应用到元素。您一样可以对该属性赋予 4 个值。

?

清单 9. 在 Safari 和 Chrome 中创建阴影

?

-webkit-box-shadow: 1px 1px 4px #666; 

?

下面是对 Safari、Chrome 和 Firefox 阴影可用的 4 个属性：

• Horizontal offset of the shadow。偏移量的数值可以是正数也可以是负数；如果是负数，那么偏移量将把影子投向元素的左边，而正数将把阴影投向右边。
• Vertical offset。这个偏移量也可以设置为正数或负数。负数将把阴影投向元素的上方，而正数将把阴影投向元素的下方。
• Blur radius。增大该属性的值将增加阴影的平滑度，而减小值将增加阴影的尖锐度。
• Hex color。可以设置阴影的十六进制颜色。

CSS 在 Internet Explorer 中的工作方式与其他浏览器不同。清单 10?显示了如何使用过滤器在 Internet Explorer 中创建阴影。第一个过滤器针对版本 6 和 7 的 Internet Explorer，而第二个过滤器针对版本 8 或更新的 Internet Explo