如何在Windows Phone 7中实现CSS3渐变效果？

Question

如何在Windows Phone 7中实现CSS3渐变效果？

3

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

我想知道是否可能，并如何为这个项目生成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创建的从蓝色到银色的pie-background

这是我的结果： enter image description here

正如你所知道的那样，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渐变吗？或者我只能使用图片来创建这个渐变效果？

- Julio Del Valle

使用HTML5文档类型并使用“-ms-filter”，渐变在我的WP7.5手机上的移动IE上运行良好。您能否发布完整的示例HTML / CSS，以便我们可以查看是否有其他问题导致了该问题？ - pjumble

我的代码太简单了，所以我不认为其他代码存在问题。 - Julio Del Valle

这是我实现的所有代码：https://plus.google.com/100901511694449655005/posts/jZPUKy1p6By - Julio Del Valle

啊，抱歉我的错误。如果我直接在移动IE中运行.html文件，渐变效果是正常的。然而，如果我通过PhoneGap运行它，渐变效果就不起作用了。 - pjumble

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Palermo · Answer 1

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

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

在JC Del Valle发布的Google代码链接中，他使用了一个不正确的背景图像定义。

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

在Twitter链接（@palermo4）的屏幕截图中，我按原样测试了您的样式。看起来它正在工作。还有其他东西与您的CSS3冲突。