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

我在WP7在我的应用程序是基于HTML5的，我被的PhoneGap框架导出应用工作。如何“Windows Phone 7中的CSS3渐变”？

我想知道是否有可能以及如何为此项目生成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 g的radient 蓝色到红色

一个CSS3渐变为蓝色橙色的WebKit浏览器

一个CSS3梯度蓝色到绿色

一个DXImageTransform对IE6 &的蓝色IE7的微软浏览器紫

一个DXImageTransform为蓝色IE8黄色

饼背景USI的蓝银

纳克CSS3PIE这是我的结果：

正如你可能知道，对于WinPhone 7.5浏览器IE9移动，和WinPhone 7.0浏览器之间的混合IE7 & IE8。这里成幻灯片16，17和18解释了CCS3特性在IE9，IE10和“IE9移动”来实现：http://goo.gl/1Wz3s

那么，如何生成Windows Phone的一个CSS3渐变任何想法？或我没有选择，我必须实现一个图像来创建此渐变？

来源

2012-02-16 Julio Del Valle

使用HTML5文档类型并使用“-ms-filter”，我的WP7.5手机在移动IE中的渐变效果很好。您可以发布完整的示例html/css，以便我们可以看到是否有其他内容导致此问题？ – pjumble 2012-02-16 21:08:59

我的代码太简单了，所以我不认为在其他代码中存在问题。 – 2012-02-16 21:20:25

这是我实现的所有代码：https://plus.google.com/100901511694449655005/posts/jZPUKy1p6By – 2012-02-16 21:27:09

只是想表明对CSS3渐变的正确语法在IE10 +

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

在发表JC戴尔瓦勒的谷歌代码的链接，他使用backgroung图像清晰度，这是不正确的。

[堆栈溢出阻止我插入图像]在微链路

在屏幕capure（@ palermo4），我测试您的样式原样。它似乎在工作。其他的东西与你的CSS3的东西有冲突。

来源

2012-02-16 22:10:45

Thx，你说得对:)但是，目前我的目标是IE9手机。：P – 2012-02-16 22:23:26

我查了一下，发现@ palermo4的图像是在IE9移动浏览器中查看的HTML5。我错了我的问题，我想看到CCS3渐变到网页浏览器。 – 2012-02-16 23:26:19

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

回答

相关问题