如何“Windows Phone 7 中的 CSS3 渐变”？

Question

我在 WP7 中工作，我的应用程序基于 HTML5，并且我通过 PhoneGap 框架 导出应用程序。 p>

我想知道是否可能以及如何为这个项目生成 CSS3 渐变（在此过程中，我想与您分享我的发现）。

目前这是我的 CSS3 代码：

body {
    background: brown;
    background-image: url(blue_to_white.jpg);
    background: linear-gradient(blue, red); /*future CSS3 browsers*/
    background: -webkit-linear-gradient(blue, orange); /*new webkit*/
    background-image:  -ms-linear-gradient(bottom, blue 50%, green 50%); /* IE10 */
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='blue', endColorstr='purple'); /* IE6 & IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='blue', endColorstr='yellow')"; /* IE8 */
    -pie-background: linear-gradient(blue, silver); /*PIE*/
    behavior: url(PIE.htc);
  }

如您所见，我的代码在后台使用了不同的技术：

• 类似棕色的底色
• 蓝到白渐变的图像
• 蓝色到红色的普通 CSS3 渐变
• 从蓝色到橙色的 webkit 浏览器的 CSS3 渐变
• 适用于 Microsoft 浏览器的 CSS3 渐变，蓝到绿
• 蓝色到紫色的 IE6 和 IE7 的 DXImageTransform
• IE8 的蓝色到黄色的 DXImageTransform
• 使用 CSS3PIE 的 蓝色到银色的饼图背景

这是我的结果：

您可能知道，WinPhone 7.5 的浏览器是 IE9 Mobile，而 WinPhone 7.0 的浏览器是 IE7 和 IE8 的混合体。在幻灯片 16、17 和 18 中解释了在 IE9、IE10 和“IE9 Mobile”中实现了哪些 CCS3 属性：http://goo.gl/1Wz3s

那么，您知道如何在 Windows Phone 中生成 CSS3 渐变吗？ 或者我别无选择，我必须实现一个图像来创建这个渐变？

Answer 1

只是想在 IE10+ 中显示 CSS3 渐变的正确语法

    background: -ms-linear-gradient(
                 bottom,                
                 #432100 30%,               
                 #00AAAA 70%);

在 JC Del Valle 发布的 google 代码链接中，他使用的是背景图像定义，这是不正确的。

[堆栈溢出阻止我插入图像]

在 twitter 链接 (@palermo4) 的屏幕截图中，我按原样测试了您的样式。它似乎正在工作。其他东西与您的 CSS3 内容冲突。