html - 如何 "CSS3 Gradient in Windows Phone 7"？

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

如您所见，我的代码对背景使用了不同的技术:

• 类似棕色的底色
• 一张图像，如蓝到白的渐变
• blue to red 的正常 CSS3 渐变
• 用于 blue to orange webkit 浏览器的 CSS3 渐变
• Microsoft 浏览器的 CSS3 渐变蓝色到绿色
• 蓝色到紫色的 IE6 和 IE7 的 DXImageTransform
• 用于 IE8 的蓝色到黄色的 DXImageTransform
• 使用 blue to silver 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 发布的谷歌代码链接中，他使用的是背景图像定义，这是不正确的。

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

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