Question

根据an Adobe forum thread，从AIR 3.0开始支持径向渐变，但body{}中的以下两行CSS都显示为全白：

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旗舰版SP1 x64，使用adl时使用AIR v3.6.0.6090，运行编译版本时使用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＆amp; 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＆amp; Safari版本（可能还有Opera 15 +）：

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

旧版（pre-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（我认为，直接过滤器中只有线性渐变）：

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%);

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

径向渐变显示为全白色

3 个答案: