实现CSS3 的跨浏览器功能(转)
?
对 Web 设计师而言，CSS3 将带来许多全新的机会。现在，您可以使用 CSS3 来添加阴影、渐变、旋转和某些字体 —— 这一切都不需要用到减慢网页速度的图像。这个小节介绍一些新的、令人激动的特性，您可以直接使用它们而不会导致跨浏览器问题。Web 设计师可以将更多时间用于创建吸引眼球的网站，而不是致力于如何让网站看起来尚可。
使用阴影
阴影给网页添加了维度；以前，阴影效果只能通过图像来实现。使用 CSS3 之后，您可以控制许多细节，包括方向、偏移量、颜色和阴影的平滑度（如?图 3?所示）。清单 8、清单 9?和?清单 10?通过几个例子展示使用 CSS 创建阴影的各种方法。
图 3. 使用 CSS3 呈现阴影
?
在 Firefox 浏览器中使用?-moz-box-shadow?来将阴影应用到元素。您可以为该属性赋予 4 个值。
清单 8. 在 Firefox 中创建阴影
?
创建渐变效果?
这些年有许多创建渐变效果的方法都流行起来了；我最喜欢的是重复 1 个像素的渐变图像。图 4?表明有了 CSS3 就不必再使用这一技巧了，因为每种浏览器处理渐变时都有自己的一套方法（见?清单 11、清单 12?和?清单 13）。
图 4. 使用 CSS3 呈现渐变效果?
您可以通过几种方式来处理渐变的显示。清单 11?是一个使用 Firefox 浏览器进行演示的简单例子，它从顶部开始渐变，然后从第一种颜色过渡到第二种颜色。
清单 11. 在 Firefox 中创建渐变效果?
旋转元素有时候，仅以常规的垂直方式显示元素还是不够用的。CSS3 中引入了形状转换，允许您旋转元素（如?图 5?所示）。您可以让元素完全翻转，也可以让它仅旋转一定的角度，并且旋转效果都是跨浏览器有效的，请参见?清单 14、清单 15?和?清单 16?的代码。
图 5. 使用 CSS3 旋转 HTML 元素??
用于旋转元素的代码直观易懂：仅使用一个数值和?
deg?来表示旋转的角度。在 Firefox 中，使用?-moz-transform?来旋转元素，如?清单 14?所示的代码。
清单 14. 在 Firefox 浏览器中旋转元素?
框调整所有浏览器都使用 W3C 框模型，因此在 CSS3 中您可以使用?
box-sizing?来设置浏览器呈现元素的宽度和高度的方式。border-box元素告诉浏览器使用实际的宽度和高度，而不考虑填充和边框。清单 17?显示了 Safari 和 Chrome 浏览器中的框调整。
清单 17. Safari 和 Chrome 浏览器中的框调整?
给元素添加边框border 元素是用来在 web 页面上定义一块区域的常见方法。新的?
outline?元素不仅能够实现 border 元素的功能，还可以设置偏移量。在?清单 20?中，offset 元素允许您创建边框，并且可以参照元素的实际位置进行偏移。在过去，仅能通过添加边框和使用填充来实现该效果，但是通常不能取得预期结果。
清单 20. 给元素添加边框并进行偏移?
使用伪类现在已有许多伪类（pseudo-class）投入使用；其中大部分伪类通常都与超链接的锚标记相关联。伪类允许为元素添加不同的状态，以及基于当前的状态改变属性。清单 21?展示了伪类的常见用法。
清单 21. 伪类的常见用法嵌入字体web 字体从一开始就一直是个问题。每个用户的计算机上可用的字体非常有限，而这些有限的字体中好看的少之又少。我们现在处于大变革的边沿，而字体嵌入（见?图 6）将允许在不使用笨重的图像的情况下创建出色的页面布局。可以通过几种方法来实现该目的。
图 6. 使用 CSS3 嵌入字体?
对于 Internet Explorer 浏览器，需要使用的字体必须采取 .eot 文件格式。清单 23?显示了如何在获得正确的字体文件时嵌入字体。
清单 23. 在 Internet Explorer 中嵌入字体?
@font-face { font-family: yanone; src: url('../fonts/yanone.eot'); src: local('Yanone'), url(../fonts/yanone.ttf) format("truetype");}.yanone { font-family: yanone, Verdana, Arial, Helvetica, sans-serif;}??
?
?
?
?