Question

我正在阅读这篇文章http://www.sitepoint.com/using-unprefixed-css3-gradients-in-modern-browsers/。我创建了本文教授的这个小小的演示。

<html>
    <head>
        <title>Css Gradients</title>
        <style>
            .demo{
                height: 200px;
                width: 400px;
                margin-bottom: 10px;
                background: linear-gradient(to right,red,yellow);
                /*background: linear-gradient(23deg,red,yellow);*/
            }
            #radial{
                /*background: radial-gradient(at center,red,yellow);*/
                background: radial-gradient(circle closest-corner,red,yellow);
            }
        </style>
    </head>
    <body>
        <div class="demo"></div>
        <div class="demo" id="radial"></div>
    </body>
</html>

现在的问题是，Firefox正在正确渲染背景渐变但Google Chrome（版本22）根本没有呈现背景渐变。请参见截图 Firefox Chrome

Answer 1

目前（Chrome 24 / Safari 6）Webkit尚未添加对未加前缀的css3渐变的支持。如果您考虑甚至IE10（！）已使用无前缀语法这一事实，这有点令人难过。

参考：http://caniuse.com/#search=grad

Google Chrome根本不渲染背景渐变

1 个答案: