css3背景徑向圓梯度

我有下面這個代碼創建一個背景徑向圓梯度。css3背景徑向圓梯度

它在所有的瀏覽器工作良好，除了IE瀏覽器（不工作，甚至在IE9）

我應該添加到CSS，以便它也對工作和IE9 IE8？

的代碼：

<!DOCTYPE html> 
<html> 
    <head> 
    <title></title> 
    <style type="text/css" media="screen"> 
     html { 
      background-color: #eee; 
      height:768px; 
     } 
     div { 
      width: 96%; 
      height: 800px; 
      padding: 10px; 
      margin:0 auto; 
     } 

     div.circle { 
      background-image: radial-gradient(center center, circle cover, #352e24, #1a160d); 
      background-image: -o-radial-gradient(center center, circle cover, #352e24, #1a160d); 
      background-image: -ms-radial-gradient(center center, circle cover, #352e24, #1a160d); 
      background-image: -moz-radial-gradient(center center, circle cover, #352e24, #1a160d); 
      background-image: -webkit-radial-gradient(center center, circle cover, #352e24, #1a160d); 
     } 
    </style> 
</head> 
    <body> 
     <div class="circle"></div> 
    </body> 
</html>

來源

2013-01-20 jimmy who

IE至多且包括9不支持CSS梯度。所以它不應該在IE 9和更舊版本中工作。
There is no need for the -ms-linear-gradient line。梯度are supported unprefixed in IE10 and they are not supported at all in IE9 and older。
你應該總是把最前面的版本。即使支持前綴不固定的語法的瀏覽器仍將使用前綴，如果您沒有將前綴不加前綴。
The new gradient syntax uses farthest-corner instead of cover。這是默認值，所以你可以不用。
center是位置的默認值（因此您可以將其忽略）。

你應該對IE9和舊的呢？不多。回退上：

與梯度linear IE filter gradient或
背景圖像或
只是一個純色（我一起去在這種情況下的選項，給你在這裏使用的兩種顏色沒有那麼不同，大多數人甚至不知道有沒有一個漸變沒有仔細觀察）

這樣的代碼應該變成：

background: #352e24; /* ultimate fallback, always put this, just in case */ 

/* if you choose the IE filter linear gradient fallback */ 
filter: progid:DXImageTransform.Microsoft.gradient(
      startColorstr=#352e24, endColorstr=#1a160d); 

/* if you choose to use the image fallback */ 
background: url(gradient.png); 

/* Chrome, Safari */ 
background: -webkit-radial-gradient(circle, #352e24, #1a160d); 

/* Firefox 15 and older, Firefox for Android */ 
background: -moz-radial-gradient(circle, #352e24, #1a160d); 

/* Opera 11.6 (older only supported linear), Opera 12.0, Opera Mobile 12.0 */ 
background: -o-radial-gradient(circle, #352e24, #1a160d); 

/* standard syntax, IE10, Firefox 16+, Opera 12.1+ */ 
background: radial-gradient(circle, #352e24, #1a160d);

來源

2013-01-20 12:25:37 Ana

有沒有使用「PIE」插件，在這種情況下呢？ http://css3pie.com/ –

http://css3pie.com/網站說是的，但我個人從未使用它，所以......實際上，我不知道它是如何工作的。 – Ana

css3背景徑向圓梯度

回答

相關問題