为什么某些 css 代码在 android 4 或更少时不起作用？

Question

我正在使用 phonegap 到移动应用程序

这段简单的代码用于给背景添加效果

background:radial-gradient(#f2f2f2,#8d8d8d);

它在浏览器和 android 5

上运行良好

但是当我在 4.0.3 设备上测试它时，它根本无法与其他一些 css 代码一起工作。

为什么会这样，如何解决？

Answer 1

CSS 中的属性有时在某些时间段内并非在所有设备或浏览器上都得到普遍支持。

当软件版本在 属性 达到批准的规范之前提供主动支持时，使用供应商前缀。

您需要检查您的目标平台是否支持。

http://caniuse.com/#search=gradients

可以看到Android 4.1使用了-webkit-前缀。你可以在 Android 4.0.3 上试试这个，它可能会很好用。

另请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient#Browser_compatibility

---

如何使用供应商前缀的示例。

模板：-#{PREFIX}-#{PROPERTY}

梯度有点特殊，前缀是函数排序，里面的值是属性.

.example {
  background-image: -webkit-radial-gradient(#222, #333);
  background-image: radial-gradient(#222, #333);
}

大多数供应商前缀如下所示：

.example2 {
  -webkit-animation: 1s anim;
  -moz-animation: 1s anim;
  animation: 1s anim;
}