css - 径向渐变显示为全白

Question

根据Adob​​e 论坛主题，从 AIR 3.0 开始支持径向渐变，但内部的以下两行 CSSbody{}仅显示为全白：

background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #088fe0), color-stop(50%, #001193), color-stop(100%, #00025f));

background: -webkit-radial-gradient(center, ellipse cover, #088fe0 0%, #001193 50%, #00025f 100%);

我能够成功使用线性渐变：

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #088fe0), color-stop(100%, #00025f));

这里出了什么问题？

我正在运行 Windows 7 Ultimate SP1 x64，使用时使用 AIR v3.6.0.6090 adl，运行编译版本时使用 v3.8.0.1430。

Answer 1

为了更好地理解，我创建了一个fiddle，请查看详细信息，

只有第一个在 Chrome 浏览器中不起作用..

其他两个工作正常。

请提供有关浏览器规范问题的更多详细信息。

编辑：根据要求更新

我已经更新fiddle，现在工作正常，

第一个梯度过滤器不起作用，因为您必须记住它不适用于 % size 和

你也不能在 PX 中指定大小，这是暗示的；如果您在 px 中指定，如果不工作。

我已经更新这在 Chrome（-webkit 浏览器）中工作正常。也应该与 AIR 一起工作。

background: -webkit-gradient(radial, center center, 0, center center, 100, color-stop(0%, #088fe0), color-stop(50%, #001193), color-stop(100%, #00025f));

Answer 2

设置回退颜色并使用 background-image 来查看 webkit 的版本是否不支持渐变：

body {
  background: red; /* fallback */
  background-image: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0%, #088fe0), color-stop(50%, #001193), color-stop(100%, #00025f));
  background-image: -webkit-radial-gradient(center, ellipse cover, #088fe0 0, #001193 50%, #00025f 100%);
}

Answer 3

如前所述，只有第一个在最新的 Chrome 中不起作用（即旧版本）。

不过，为了实现跨浏览器的最大兼容性，您可能需要在此处包含一些声明

不支持渐变的旧浏览器默认为纯色：

background: #088fe0;

火狐：

background: -moz-radial-gradient(center, ellipse cover, #088fe0 0%, #001193 50%, #00025f 100%);

较旧的 Chrome 和 Safari 版本（均使用 WebKit 引擎）：

background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#088fe0), color-stop(50%,#001193), color-stop(100%,#00025f));

较新的 Chrome 和 Safari 版本（可能是 Opera 15+）：

background: -webkit-radial-gradient(center, ellipse cover, #088fe0 0%,#001193 50%,#00025f 100%); 

较旧的（webkit 之前的）Opera：

background: -o-radial-gradient(center, ellipse cover, #088fe0 0%,#001193 50%,#00025f 100%);

IE 10：

background: -ms-radial-gradient(center, ellipse cover, #088fe0 0%,#001193 50%,#00025f 100%);

较旧的IE（我认为directx过滤器中只有线性渐变）：

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#088fe0', endColorstr='#00025f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

以及应该使用哪些浏览器（标准版本）：

background: radial-gradient(ellipse at center, #088fe0 0%,#001193 50%,#00025f 100%);

如果你把所有这些选项都放进去，你应该在任何支持它们的地方得到渐变。