CSS前缀实现跨浏览器渐变

CSS前缀实现跨浏览器渐变,css,Css,我希望实现跨浏览器渐变,如果你检查右上角与我的移动网站品牌内联运行的锚,它的样式为前缀moz for Firefox: 我想问一下,有没有类似的方法来实现带有IE、Opera和webkit前缀的跨浏览器渐变解决方案?一个在线工具,可以自动为所有现代浏览器生成CSS渐变规则: 但一般来说,主要语法如下: background: #color; /*fallback*/ background: -moz-linear-gradient(...);/*Firefox*/ background: -w

我希望实现跨浏览器渐变,如果你检查右上角与我的移动网站品牌内联运行的锚,它的样式为前缀moz for Firefox:


我想问一下,有没有类似的方法来实现带有IE、Opera和webkit前缀的跨浏览器渐变解决方案?

一个在线工具,可以自动为所有现代浏览器生成CSS渐变规则:

但一般来说,主要语法如下:

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*/
看一看。我个人喜欢他们的缩进风格

.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+ */
}

正如您所看到的,现在就不需要
-ms-
前缀了。请确保使用for
linear-gradient()

如果您使用firefox作为浏览器。然后您可能需要使用名为colorzilla的插件。这是一个很好的工具,带有诸如颜色选择器、滴管、托盘浏览器、CSS渐变生成器、网页DOM代码分析器、检查最后一个元素以及缩放等选项

但是,您可以通过以下链接生成css渐变:


根据您的需要,您还应查看和查看
.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+ */
}