如題:

根據 微軟官方文件 (http://msdn.microsoft.com/zh-tw/library/ie/hh801215(v=vs.85).aspx) 說明,

以 DirectX 為基礎的濾鏡和轉場 (「DX 濾鏡」) 在 Internet Explorer 10 中對 [網際網路] 區域中的網頁來說已過時。   根據預設,會對 [近端內部網路] 和 [信任的網站] 區域中的網頁停用這些功能,但是您可以針對選取的文件模式啟用這些功能。

最佳做法是更新倚賴這些功能的網站和應用程式,以使用階層式樣式表層級 3 (CSS3)、可縮放向量圖形 (SVG) 及其他廣泛支援的標準。

所以原始寫法如:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6f2f2f', endColorstr='#e52115',GradientType=1 );

產生線性漸層的樣式, 必須改寫. 改使用

-ms-linear-gradient(方向, 起始色 0%, 結束色 100%); 

例如:

原本寫成:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6f2f2f', endColorstr='#e52115',GradientType=1 );

在IE10要正常顯示, 就必須寫成:

background-image: -ms-linear-gradient(left, rgb(111,47,47) 0%, rgb(229,31,21) 100%); 

如果不知道如何寫, 或者, 懶得寫, 那就用產生的.

開啟 http://gradients.glrzad.com/ 網址, 載入 CSS3 Gradient Generator 頁面,

CSS3 Gradient Generator  

並於下面色塊輸入起始色碼 和 結束色碼, 設定線性方向, 就可以產生符合需求的CSS語法.

一次產生所有瀏覽器都適用的CSS語法:

background-image: linear-gradient(bottom, rgb(0,0,0) 0%, rgb(224,224,224) 100%);
background-image: -o-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(224,224,224) 100%);
background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(224,224,224) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(224,224,224) 100%);
background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(224,224,224) 100%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(0,0,0)),
color-stop(1, rgb(224,224,224))
);

 


文章標籤
創作者介紹

經驗交流分享與備忘

Frank 發表在 痞客邦 PIXNET 留言(0) 人氣()