CSS Gradients ...意见？

Question

我一直在设计网站很长一段时间只使用渐变图像,对于小渐变这似乎工作正常并没有增加太多的加载时间,但现在与新的CSS碎片化很多(webkit/moz/o/khtml,更不用说即6,7,8,9)

因此,为了只有一个普遍的梯度,这将是很多css.

对于需要大量渐变的网站,我使用Less.js来使它稍微好一点,但这只是到目前为止......

我只是想知道在图像上使用css渐变更有意义,如果真的有一个突破点.

[前.一个小的5px渐变,只有一个5px的图像更有意义,但像1000px的渐变,它可能更有意义,只使用css]

哦,我知道有SVG,我还没有真正尝试过,但它运作良好吗？

任何意见将不胜感激.:)

Answer 1

使用图像的问题是你能做的事情受到更多限制。如果您想使用背景渐变并且该框比您预期的要大，则渐变会提前停止或开始重复。这两种解决方案可能都不是您想要的。

\n\n

您可以查看www.css3please.com获取有关如何在 css3 中获得良好效果的示例（带有实时示例代码）。对于背景渐变，您可以使用以下内容：

\n\n

.box_gradient {\n  background-color: #444444;\n  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */\n  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */\n  background-image:    -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */\n  background-image:     -ms-linear-gradient(top, #444444, #999999); /* IE10 */\n  background-image:      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */\n  background-image:         linear-gradient(top, #444444, #999999);\n            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=\'#444444\', EndColorStr=\'#999999\'); /* IE6\xe2\x80\x93IE9 */\n}\n

\n