CSS3 线性渐变不适用于 android。
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10536876/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 linear-gradient not working on android.
提问by Evanss
Newbie question here but for some reason I cant figure this out. I have the following CSS which works fine on my iPhone but not an my Android. From looking at the jQuery Mobile demos with the android I know it can handle background gradients. Thanks
新手问题在这里，但由于某种原因我无法弄清楚。我有以下 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;
}
回答by Cmorales
Android browser below 4.0, according to caniuseuses the old -webkitsyntax:
Android 4.0以下浏览器，根据caniuse使用旧-webkit语法：
background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a7cfdf), color-stop(100%, #23538a));
Bonus: I recommend you use something like LESS or Compass/SASS, it would save you all this work http://compass-style.org/
奖励：我建议您使用 LESS 或 Compass/SASS 之类的东西，它可以为您节省所有这些工作http://compass-style.org/
回答by applesElmi
I came across this question because I was having issues with linear gradients on an Android 2.2. The issue was, our linear gradient was using the new angle system
我遇到了这个问题，因为我在 Android 2.2 上遇到了线性渐变问题。问题是，我们的线性梯度使用了新的角度系统
-webkit-linear-gradient(to top #000000 0%, #ffffff 100%)
however, older Android's support the old angle system (without to). The equivalent of the above gradient would be
但是，较旧的 Android 支持旧的角度系统（没有to）。上述梯度的等价物将是
-webkit-linear-gradient(bottom #000000 0%, #ffffff 100%)
回答by Will Meldon
background-color:#666633; //fallback
background:-webkit-linear-gradient(top, #666633, #333300); //webkit
background:-moz-linear- gradient(top, #666633, #333300) //mozilla
This works.
这有效。
