CSS3线性渐变不适用于android。

时间:2012-05-10 15:04:34

标签: android css3

这里有新手问题,但出于某种原因,我无法弄清楚这一点。我有以下CSS在我的iPhone上工作正常但不是我的Android。通过使用android查看jQuery Mobile演示,我知道它可以处理背景渐变。谢谢

.mydiv {
  background:    -moz-linear-gradient(#FFFFFF, #F1F1F1) repeat scroll 0 0 #EEEEEE;
  background: -webkit-linear-gradient(#FFFFFF, #F1F1F1) repeat scroll 0 0 #EEEEEE;
  background: linear-gradient(#FFFFFF, #F1F1F1) repeat scroll 0 0 #EEEEEE;
}

3 个答案:

答案 0 :(得分:23)

Android浏览器4.0以下,根据 caniuse 使用旧的-webkit语法:

background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a7cfdf), color-stop(100%, #23538a));

额外奖励:我建议您使用LESS或Compass / SASS之类的东西,它会为您节省所有这些工作http://compass-style.org/

答案 1 :(得分:3)

我遇到了这个问题,因为我在Android 2.2上遇到线性渐变问题。问题是,我们的线性渐变是使用新的角度系统

-webkit-linear-gradient(to top #000000 0%, #ffffff 100%)

然而,较旧的Android支持旧角度系统(没有)。上述梯度的等价物是

-webkit-linear-gradient(bottom #000000 0%, #ffffff 100%)

答案 2 :(得分:1)

background-color:#666633; //fallback
background:-webkit-linear-gradient(top, #666633,    #333300);  //webkit
background:-moz-linear- gradient(top, #666633, #333300) //mozilla

这很有效。