css3背景径向圆梯度

Question

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ana*_*Ana 7

IE到9并不包括CSS渐变.所以它不适用于IE 9及更早版本.
没有必要的-ms-linear-gradient线.在IE10中支持渐变的渐变,在IE9及更早版本中根本不支持它们.
您应该始终将未加前缀的版本放在最后.如果你没有将未加前缀的版本放在最后,即使是支持无前缀语法的浏览器仍然会使用带前缀的语法.
新的渐变语法使用farthest-corner而不是cover.这是默认值,所以你可以把它留下来.
center 是position的默认值(所以你也可以将其保留).

你应该为IE9及更老版做些什么？不多.回落:

一个线性滤波器IE梯度或
带有该渐变的背景图像或
只是一个纯色(在这种情况下我选择的选项,因为你在这里使用的两种颜色彼此没有那么不同,大多数人甚至不能在没有仔细观察的情况下告诉它有一个渐变)

所以代码应该成为:

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，11 月前
查看次数：	7752 次
最近记录：	12 年，11 月前