Question

下面的截图展示了在同样的浏览器中完全使用CSS3制作的按钮效果：

图片版和纯CSS版之间的视觉差异微不足道，我想这点你应该同意。相较于使用图片，使用CSS3制作视觉效果能使我们的响应式设计更加简洁。而且，现代浏览器都能很好地支持渐变，唯一需要权衡是那些对渐变支持不怎么到位的浏览器，如IE 9以及更低版本的IE。

CSS3还带来了什么

刚才，我们欣赏了一个CSS3能帮助我们完成的日常工作的小例子。接下来，我们想尝尝开胃大菜，看看CSS3能带给我们什么美味。启动Safari或Chrome，访问http://www.panic.com/blog/。遗憾的是这个网页不是响应式设计，我们关心的区域是页面上方的那一排记事贴。把鼠标悬停在上面就可以看到它们浮起来。很帅吧？过去，这种增强效果一般都要靠笨重的Flash或者JavaScript实现。而现在则可以完全通过CSS3的变换来实现。使用CSS3制作动画比JavaScript或Flash更轻量级，更好维护，因此对响应式设计来说很理想。支持该特性的浏览器会显示效果，不支持的则装傻跳过，仅将其看做一张静态图片而已。

另一个优秀的CSS3动画范例是http://demo.marcofolio.net/3d_animation_css3。这个网站也不是响应式设计，但我们只关心其中用到的CSS技巧。先在Internet Explorer 9或者Firefox中看看（9.0版本以前，Firefox还不支持该CSS3模块），然后在Safari 5＋或者Chrome 16＋中看看效果。下面的截图效果未尽其意，如果你不准备亲自欣赏，那你得相信我的话——确实很赞：

酷炫的效果不仅仅只是Webkit核心的Safari和Chrome浏览器的专利。下面的例子在Firefox中也很炫，而且也是纯CSS3实现的：http://designlovr.com/examples/dynamic_stack_of_index_cards/。

显然，这些效果不是每个网站都必需的。它们是“渐进增强”的完美印证。在不支持特殊效果的浏览器里，用户只会看到静态的图片。但使用现代浏览器的用户则可以享受增强的视觉效果。虽然支持CSS3 3D变换的浏览器非常有限，但支持诸如文字阴影、渐变、圆角、RGBA颜色和多重背景图片等CSS3效果的浏览器则非常多，这为解决常年来令我们挠头的设计问题提供了灵活的方法。