我希望实现跨浏览器渐变,如果您检查右上角的锚点与我的移动网站的品牌内联运行,它已使用 Firefox 的前缀 moz 进行样式设置:
background: -moz-linear-gradient(center top , #4A4A4A, #2C2C2C) repeat scroll 0 0 transparent;
请问有没有类似的方法可以实现IE、Opera和webkit前缀的跨浏览器渐变方案?
我希望实现跨浏览器渐变,如果您检查右上角的锚点与我的移动网站的品牌内联运行,它已使用 Firefox 的前缀 moz 进行样式设置:
background: -moz-linear-gradient(center top , #4A4A4A, #2C2C2C) repeat scroll 0 0 transparent;
请问有没有类似的方法可以实现IE、Opera和webkit前缀的跨浏览器渐变方案?
为所有现代浏览器自动生成 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*/
如果您使用 firefox 作为浏览器。那么您可能需要使用名为 colorzilla 的插件。这是一个不错的工具,带有颜色选择器、滴管、调色板浏览器、CSS 渐变生成器、网页 DOM 代码分析器、检查最后一个元素以及缩放等选项。
但是,您可以在以下链接中生成 css 渐变:
请看一下CSS3。我个人喜欢他们的缩进风格。
.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 立即支持 W3C 语法-ms-
,因此不需要前缀。请确保您使用正确的W3C语法!linear-gradient()