使用代码肯定更灵活,更有成效,但是使用css渐变的按钮,酒吧等还有一个缺点吗？
这是一个跨浏览器CSS渐变示例：
background: #1E5799; /* old browsers */ background: -moz-linear-gradient(top,#1E5799 0%,#2989D8 50%,#207cca 51%,#7db9e8 100%); /* firefox */ background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#1E5799),color-stop(50%,#2989D8),color-stop(51%,#207cca),color-stop(100%,#7db9e8)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1E5799',endColorstr='#7db9e8',GradientType=0 ); /* ie */ background: -o-linear-gradient(top,#7db9e8 100%); /* opera */
解决方法
Sometimes it’s tempting to use webkit’s drawing features,like -webkit-gradient,when it’s not actually necessary – maintaining images and dealing with Photoshop and drawing tools can be a hassle. However,using CSS for those tasks moves that hassle from the designer’s computer to the target’s cpu. Gradients,shadows,and other decorations in CSS should be used only when necessary (e.g. when the shape is dynamic based on the content) – otherwise,static images are always faster. On very low-end platforms,it’s even advised to use static images for some of the text if possible.
资料来源：https://trac.webkit.org/wiki/QtWebKitGraphics#Usestaticimages
当然,您必须平衡cpu时间与从服务器加载映像所需的额外时间.此外,对于Internet Explorer,过滤器非常慢,特别是如果您在一个页面上有很多.
