CSS渐变不起作用IE10 +

Question

我有一个要添加渐变的box ，它可以在Chrome和IE10 +以外的其他浏览器中使用。下面是我的CSS代码：

.box-gradient {
position:absolute;
width:100%;
height:100%;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:5px;
background: -moz-linear-gradient(left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#CCCCCC),color-stop(50%,#EEEEEE), color-stop(50%,#EEEEEE), color-stop(100%,#CCCCCC));   
}

提前致谢！！

Answer 1

您必须在IE10 +中加入一行

background: -ms-linear-gradient(to left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);

我以前有过这个问题。 添加渐变兼容性可能是一项非常艰巨的工作。 我认为您更喜欢使用渐变发生器

Answer 2

您需要一个无前缀的线性渐变才能读取IE10。 像这样：

background: linear-gradient(to left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);

Answer 3

您还需要添加一个非前缀版本：

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#CCCCCC),color-stop(50%,#EEEEEE), color-stop(50%,#EEEEEE), color-stop(100%,#CCCCCC));
background: -moz-linear-gradient(left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);
background: -o-linear-gradient(left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);
background: linear-gradient(to right, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);

有很多工具可以帮助您处理各种前缀。