Question

如果你从20世纪90年代中期就开始从事网页设计，应该记得当时所有的设计都基于表格布局。而且，样式与内容是交织在一起的。CSS（层叠样式表）作为一种将设计与内容分离的方法被引入。网页设计师们花了一些时间才走进基于CSS设计的美丽新世界，诸如“CSS禅意花园”（http://www.csszengarden.com）这样的网站从视觉上形象地展示了基于CSS设计的网站所能达到的效果，为我们铺平了前进的道路。从那以后，CSS成为了定义网页表现层的标准方法，CSS 2.1是当前正式批准的CSS标准。CSS3尚未被正式批准，但这并不意味着它的大部分内容现在无法使用。W3C工作组的说明如下：

CSS3是在CSS 2基础上按模块构建的，以CSS 2.1标准为核心。每个模块都会增加功能或是替换CSS 2.1标准中已有章节。CSS工作组的设想是新的CSS模块不会与CSS 2.1标准冲突，这些模块只会追加新功能，改进已有规定。

大部分W3C标准草案读起来（不可避免地）像法律条文。简单来说，CSS3是一种附加模块式构造，而不是大一统的标准。由于CSS3以CSS 2.1为核心，所以CSS 2.1的功能照样可以使用。不仅如此，某些相对成熟的CSS3模块（并不是所有模块都得到了相同程度的支持）今天也可以较为广泛地使用了，因此不必等待整个规范得到批准。

1.7.1　底线：CSS3不破坏任何东西

关于CSS3，最鼓舞人心的一点应该是在老版本浏览器中使用它们无法解析的属性，不会造成任何问题。它们（包括Internet Explorer 6、7、8）会欣然忽略那些无法解析的属性。这使我们能够为那些先进的浏览器进行渐进增强设计，同时为老版本浏览器提供合理的降级处理。

1.7.2　CSS3如何解决日常设计问题

我们来看一个在大多数项目中都会遇到的设计问题——给界面元素创建圆角效果，可能是设计选项卡式界面，也可能是给诸如头部这样的块状元素应用圆角。在CSS 2.1中可以使用滑动门技术（http://www.alistapart.com/articles/slidingdoors/）来实现，即将一张背景图片放在另一张后面。对应的HTML代码比较简单：

为了给<a>元素添加圆角背景，我们需要制作两张图片。第一张叫做headerLeft.png，15像素宽40像素高；第二张叫做headerRight.png，宽度要超过头部可能设定的最大宽度（本例中宽度为280像素）。两张图片合起来组成滑动门。当元素宽度增加时（<span>标签内的文字增加），背景图片会填满背景空间，这样就形成了一个普遍适用的圆角解决方案。下面是本例中的CSS代码：

Google Chrome浏览器（v16）中的效果如下：

上面的方法解决了设计问题，但却需要增加一个多余的标签（从语义上看<span>标签没有实际意义）和两次额外的服务器端HTTP请求（两张图片）来创建屏幕上的视觉效果。除此之外，我们还可以使用CSS“雪碧”（Sprite）技术，将两张图片合成一张，然后使用background-position属性来调整定位，虽然这样还可以节省一点带宽，但仍然不是一个灵活的方案。如果客户要求圆角更大一点怎么办？或者要求修改颜色怎么办？我们必须得重新修改图片。悲哀的是，作为前端设计师和工程师的我们，在CSS3出现以前，就身处这样的窘境中。女士们先生们，我已经看到了光明的未来，那是由CSS3塑造的未来！我们将上述的HTML代码简化成这样：

CSS代码改为如下所示：

下面的效果图展示了在同样的浏览器（Chrome v16）中呈现的CSS3版的圆角按钮效果：

在上面的代码中，先前的两张图片已被替换为一张沿x轴平铺的1像素宽图片。虽然图片只有1像素宽，但高度仍然是40像素，比任何可能出现在其中的元素都高。在使用图片作为元素背景时，一定要对其高度“高度注意”，以预防内容溢出。不幸的是，这样会产生更大的图片，需要更多带宽。尽管如此，和先前完全使用图片的解决方案不同的是，CSS3提供了border-radius及其相关属性来帮助我们设置圆角。客户想让圆角更平滑一点，比如改成12像素？没问题，只需要将border-radius的属性值改为12px，搞定！CSS3的圆角属性简单、灵活，并且Safari（v3＋）、Firefox（v1＋）、Opera（v10.5＋）、Chrome（v3＋）和Internet Explorer 9（及IE 10）都支持它。微软对IE 9能够支持这个属性得意洋洋（我希望你能感受到我在此处所表达的一丝讽刺），他们甚至专门设计了一个交互页面来演示使用border-radius属性能达到的各种效果。演示页面的地址如下：

http://ie.microsoft.com/testdrive/html5/borderradius/default.html

CSS3可以更进一步，不再需要渐变背景图片，而是使用浏览器渲染的效果。浏览器对这个特性的支持不是很好，但按照linear-gradient（yellow， blue）这个基本思路，任意元素的背景都可以用CSS3生成的渐变来渲染。

渐变可以设定为纯色，即传统的HEX颜色值（如#BFBFBF）；也可以使用任何一种CSS3颜色模式（更多详情请见第5章）。如果你想给老版本浏览器的用户设置替换渐变的纯色背景（否则他们看不到任何背景），如下所示的CSS代码可以给不支持渐变的浏览器提供一个纯色背景：

linear-gradient属性会指示浏览器从第一个颜色值（即例子中的#4fec50）开始，渐变至第二个颜色值（#42c264）。

你可能注意到了，CSS代码中的background-image：linear-gradient属性使用不同前缀（例如-webkit-）重复了多次。这种写法允许不同的浏览器（包括-moz-代表的Mozilla Firefox，-ms-代表的Microsoft Internet Explorer等）厂商在发布正式版本之前之前，试验各自对CSS3新特性的实现，正式版本发布后就不再需要前缀。遵循样式表的层叠特性，我们将无前缀的代码放在最后，这样如果该特性可用，则会覆盖之前的声明。