Question

我希望实现一个跨浏览器渐变，如果您检查右上角的锚点与我的移动网站的品牌内联运行，它的样式为Firefox的前缀为moz：

www.test-bed.co.uk/mobile/

background: -moz-linear-gradient(center top , #4A4A4A, #2C2C2C) repeat scroll 0 0 transparent;

请问有没有类似的方法来实现IE，Opera和webkit前缀的跨浏览器渐变解决方案？

Answer 1

一种在线工具，可自动生成所有现代浏览器的CSS渐变规则：little link。

但一般来说，这是主要语法：

background: #color; /*fallback*/
background: -moz-linear-gradient(...);/*Firefox*/
background: -webkit-gradient(...);/*Chrome + Safari*/
background: -webkit-linear-gradient(...);/*Another Chrome + Safari*/
background: -o-linear-gradient(...); /*Opera*/
background: -ms-linear-gradient(...); /*IE10+*/
background: linear-gradient(...); /*W3C standards*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#color', endColorstr='#color',GradientType=0); /*IE6-9*/

Answer 2

看看CSS3 Please。我个人喜欢他们的缩进风格。

.box-gradient {
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Safari 4+, Chrome */
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Safari 5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */
  background-image:      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */
  background-image:         linear-gradient(to bottom, #444444, #999999); /* Firefox 16+, IE10, Opera 12.50+ */
}

如您所见，自IE10 supports the W3C syntax以来不需要-ms-前缀。请确保您使用linear-gradient()进行{{1}}！

Answer 3

如果您使用firefox作为浏览器。那么你可能想使用名为colorzilla的插件。这是一个很好的工具，包括颜色选择器，滴管器，Pallette浏览器， CSS渐变生成器，网页DOM代码分析器，检查最后一个元素以及缩放。

但是你可以在以下链接中生成css gradient：

http://www.colorzilla.com/gradient-editor/

CSS前缀实现跨浏览器渐变

3 个答案: