Question

过去，我们要么押注用户愿意为优雅漂亮的设计多等点时间（顺便说一句，用户不愿意），要么为了可用性而抛弃图片，牺牲设计理念。CSS3让我们可以在很多方面不必再妥协和牺牲。仅需要几行代码（而且不用图片），CSS3就可以创造出各种效果：圆角、背景渐变、文字阴影、盒阴影、自定义字体以及多重背景图片（当然，这个效果确实需要图片）。如果这还不够神奇，甚至我们之前需要依赖JavaScript的一些基本交互效果如悬停动画，也可以使用纯CSS3来实现。CSS3所蕴含的海量利好及精简之道，可以让我们将响应式设计从“一个普通的可响应网站”提升为一个面向未来的真正响应式网站。使用CSS3之后，可以让响应式设计加载更快，所需资源更少，且在将来更容易维护和修改。在进入正题之前，我们先来解决一个棘手的问题。

5.1.1　Internet Explorer 6到8对CSS3的支持

除少数例外（如@font-face），老版本的IE（IE 6、7、8）几乎不支持CSS3的新特性。那么我们可以在设计开发中使用CSS3吗？和以前一样，答案依然是：“看情况。”

就我个人而言，目前我主要将CSS3用作增强网站，而不是用它提供基本功能。我非常喜欢页面元素在不同的浏览器中看起来有点差异，相信你和你的客户也是这样。你会发现回顾一下1.11节“引导客户：网站不必在所有浏览器中表现一致”会很有帮助。评价网站某部分“可行”或“看上去不错”是很主观的。但是你得知道有很多腻子脚本（polyfill）可以为老版本IE增加CSS3功能。想要应用这些腻子脚本，应该详细参阅第9章的内容。

各版本Internet Explorer对CSS 2.1和CSS3特性的支持情况，请见如下网址：http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx（或http://tinyurl.com/495756c）。

5.1.2　使用CSS3设计和开发页面

我不能替你说话，但我确实发现重做图片很烦人。你知道我说的就是这些意见——“能不能让圆角再平滑点？”或者“渐变的顶部颜色能不能再深点？”一旦我们老老实实地做了修改，则不可避免的会听到：“噢，算了，刚才那样挺好。你能改回去吗？”现在当然可以，这种来来回回的过程不可避免；毕竟我们常常只想改改设计看看效果。CSS3可以让你使用代码在几秒钟之内搞定这些，而不用在图片编辑器里花费好几分钟。