css - css 中的多色条 - 在 Firefox 中可以，但在其他人中不行

Question

我正在使用以下代码创建一个横跨页面的 100% 宽度的多色条。

在 Firefox 中没问题，但所有其他浏览器都是空的，没有颜色。

这是 CSS:

.colorBar {
position: relative;
height: 0.5em;
background: -moz-linear-gradient(left center , 
            rgb(231, 82, 57) 0%, 
            rgb(231, 82, 57) 12.5%, 
            rgb(255, 150, 28) 12.5%, 
            rgb(255, 150, 28) 25%, 
            rgb(255, 204, 39) 25%, 
            rgb(255, 204, 39) 37.5%, 
            rgb(252, 230, 47) 37.5%, 
            rgb(252, 230, 47) 50%, 
            rgb(205, 227, 91) 50%, 
            rgb(205, 227, 91) 62.5%, 
            rgb(130, 204, 51) 62.5%, 
            rgb(130, 204, 51) 75%, 
            rgb(65, 190, 206) 75%, 
            rgb(65, 190, 206) 87.5%, 
            rgb(4, 156, 219) 87.5%, 
            rgb(4, 156, 219) 100%) 
            repeat scroll 50% 0px transparent;
background: -webkit-linear-gradient(left center , 
            rgb(231, 82, 57) 0%, 
            rgb(231, 82, 57) 12.5%, 
            rgb(255, 150, 28) 12.5%, 
            rgb(255, 150, 28) 25%, 
            rgb(255, 204, 39) 25%, 
            rgb(255, 204, 39) 37.5%, 
            rgb(252, 230, 47) 37.5%, 
            rgb(252, 230, 47) 50%, 
            rgb(205, 227, 91) 50%, 
            rgb(205, 227, 91) 62.5%, 
            rgb(130, 204, 51) 62.5%, 
            rgb(130, 204, 51) 75%, 
            rgb(65, 190, 206) 75%, 
            rgb(65, 190, 206) 87.5%, 
            rgb(4, 156, 219) 87.5%, 
            rgb(4, 156, 219) 100%) 
            repeat scroll 50% 0px transparent;
background: -ms-linear-gradient(left center , 
            rgb(231, 82, 57) 0%, 
            rgb(231, 82, 57) 12.5%, 
            rgb(255, 150, 28) 12.5%, 
            rgb(255, 150, 28) 25%, 
            rgb(255, 204, 39) 25%, 
            rgb(255, 204, 39) 37.5%, 
            rgb(252, 230, 47) 37.5%, 
            rgb(252, 230, 47) 50%, 
            rgb(205, 227, 91) 50%, 
            rgb(205, 227, 91) 62.5%, 
            rgb(130, 204, 51) 62.5%, 
            rgb(130, 204, 51) 75%, 
            rgb(65, 190, 206) 75%, 
            rgb(65, 190, 206) 87.5%, 
            rgb(4, 156, 219) 87.5%, 
            rgb(4, 156, 219) 100%) 
            repeat scroll 50% 0px transparent;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25) inset;
}

简单地称为:<div class="colorBar"></div>所以问题是如何让它与所有浏览器兼容

Here's a fiddle

Answer 1

语法在各种浏览器中略有不同。

这是否更接近您要查找的内容？ (只是添加了标准，没有供应商前缀)

background: linear-gradient(90deg,
                rgb(231, 82, 57) 0%, 
                rgb(231, 82, 57) 12.5%, 
                rgb(255, 150, 28) 12.5%, 
                rgb(255, 150, 28) 25%, 
                rgb(255, 204, 39) 25%, 
                rgb(255, 204, 39) 37.5%, 
                rgb(252, 230, 47) 37.5%, 
                rgb(252, 230, 47) 50%, 
                rgb(205, 227, 91) 50%, 
                rgb(205, 227, 91) 62.5%, 
                rgb(130, 204, 51) 62.5%, 
                rgb(130, 204, 51) 75%, 
                rgb(65, 190, 206) 75%, 
                rgb(65, 190, 206) 87.5%, 
                rgb(4, 156, 219) 87.5%, 
                rgb(4, 156, 219) 100%) 
                repeat scroll 50% 0px transparent;

http://jsfiddle.net/mNZDP/6/

90deg 只是表示“从左到右”。我个人认为它比更长的“左上右下”(或其他)更容易理解。如果您不提供方向参数，它将默认为零度旋转——这意味着，它将从上到下。

关于供应商前缀的一点:
Chrome、Opera 和 IE10+ 使用该标准。如果您需要支持 Android、iOS6(或更低版本)或 Safari 6(或更低版本)，则需要 -webkit- 前缀。

IE 从来没有为渐变使用过前缀(告诉你使用 -ms- 的人都是肮脏的骗子)，所以如果你需要支持 IE9 或更低版本，你需要某种回退。

您可能不需要 -moz- 或 -o- 前缀，特殊情况除外。

注意:旧版本的 Webkit(例如，在 Android 2.3 上)使用不同的语法。

查看规范了解更多详情:http://dev.w3.org/csswg/css-images-3/
也结帐Can I Use查看哪个浏览器支持什么。