css3背景径向圆渐变答案

【问题标题】：css3 background radial circle gradientcss3背景径向圆渐变
【发布时间】：2013-01-20 11:21:52
【问题描述】：

我有这段代码，它在下面创建了一个背景径向圆渐变。

它在除 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>

【问题讨论】：

标签： css

【解决方案1】：

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);

【讨论】：

css3pie.com 网站说可以，但我个人从未使用过它，所以...实际上，我不知道它是如何工作的。