第14章　使用CSS3进行增强

本章内容

网站制作者多年来面临的挑战之一就是，使用CSS建立丰富布局的选择是很有限的。在大多数情况下，要建立丰富的布局，就需要使用额外的HTML、CSS及大量图像。这样做的结果就是，页面变得更为复杂，可访问性降低，浏览器需要花更长的时间下载和显示，同时，页面变得更为脆弱，更难维护。

近年来，浏览器快速吸纳了很多新的CSS3属性，让上述情况有了改观。如今，仅使用CSS创建圆角、渐变和阴影以及调整透明度等已经变成现实，这也减少了网页需要使用的标记和图像的数量。或许更为重要的是，这让页面在处理能力较弱的设备（如智能手机）以及台式机、笔记本电脑上下载和显示的速度变得更快了。

随着CSS的持续发展，不同浏览器对新的CSS属性的支持程度不一仍然是一项挑战。

在本章中，我们将看到如何使用一些流行且实用的CSS3属性创建圆角、阴影和渐变，对一个元素使用多重背景，以及调整透明度。我们还将看到浏览器厂商和Web专业人员如何使用渐进增强的哲学，通过厂商前缀和基于JavaScript的polyfill缩小浏览器之间的差异。

本章的代码示例可以在本书的配套网站上找到（www.bruceontheloose.com/htmlcss/examples/）。该网站上还包括结合本章讨论的CSS3效果的其他一些示例。