如何「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漸變」？

回答

相關問題