IE3上的CSS3線性漸變

我們已決定終於支持Internet Explorer，但目前僅支持10.我一直在閱讀關於IE瀏覽器的CSS支持，我不確定目前是否可以在IE中執行此操作？IE3上的CSS3線性漸變

background: linear-gradient(bottom right,circle,rgba(0, 0, 0, .04),transparent 80px,transparent 100%);

有沒有辦法做到這一點，還是需要回落到PNG？

來源

2013-04-11 Jamie Turner

你試過了嗎？你想讓它看起來像什麼？ – 2013-04-11 19:36:07

目前沒有任何事情發生。只是空白。 – 2013-04-11 19:38:03

需要它看起來像一個陰影在左側淡出。這是一個橫向規則。 – 2013-04-11 19:39:09

您的OP聲明不起作用。不，回落到圖像是沒有必要的。你的聲明是無效的。解釋你想在'線性'或'圓形'漸變之間做什麼，或者只需要去http://www.colorzilla.com/gradient-editor/並重建你的線條。

您正在尋找這樣的事情（跨瀏覽器向後兼容）：

.shadow { 

background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.03) 31%, rgba(0,0,0,0) 32%, rgba(0,0,0,0) 100%); 
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 32%,rgba(0,0,0,0) 100%); 
background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 32%,rgba(0,0,0,0) 100%); 
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 32%,rgba(0,0,0,0) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#00000000',GradientType=1); 
}

jsFiddle with yours and mine，你可以玩

[發佈筆記]

關於IE瀏覽器：在「過濾器「規則適用於IE9，IE10的預覽版使用」-ms「前綴語法，而IE10則使用標準語法。

有關詳細信息，請參閱linear-gradient page on MDN。

來源

2013-04-11 19:43:59

謝謝。只需要我所需要知道的一切。所以回退到圖像是IE10的唯一選擇？ – 2013-04-11 19:44:59

不，'後退'不是方法。像@RowlandShaw用戶問道：你想讓它看起來像什麼？ – 2013-04-11 19:51:02

在添加很多可能不需要的代碼行之前（如漸變生成器所做的那樣）http：//lea.verou。me/2013/04/can-we-get-rid-of-gradient-prefixes/ColorZilla非常適合初學者，但令人遺憾的是，它使它看起來像沒有瀏覽器，但支持標準語法（你可以看到，如果你也選擇生成評論）。這不是真的。當前版本的IE，FF，Opera和Chrome都支持前綴不固定。 – Ana 2013-04-11 20:35:41

我在Windows 7中，IE10.0.9200.17148測試從modern.ie

而且background-image: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 32%,rgba(0,0,0,0) 100%);作品。

ie10-gradient

如果你有一個IE10，這裏測試： https://fiddle.jshell.net/txLtok1w/1/

...和你的操作系統和IE瀏覽器版本/次要版本報告梯度是否顯示或不在一起。

來源

2015-05-06 09:15:00 lulalala

作品：Win 8.1，IE10 – lulalala 2015-05-06 09:15:57

IE3上的CSS3線性漸變

回答

相關問題