Question

问候所有人，

我正在使用带有-webkit-gradient的渐变背景。它不适用于Windows 7上的Chrome 8.0.552.224，但我发誓它最近在Chrome-OS X上运行。它是星期一所以也许我错过了一些明显的东西，但如果是这样我就无法理解它。我很感激你看看。此处的示例代码适用于Firefox，但不会在Chrome中显示渐变：

谢谢， -Northk

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Gradient test </title>
    <style>
        .main-header
        {
            padding-top: 50px;
            min-height: 50px;
            background: -webkit-gradient(linear, 0%, 0%, 0%, 100%, from(#fff), to(#000));
            background: -moz-linear-gradient(top, #fff, #000);
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="main-header">
        THIS WORKS ON FIREFOX BUT DOESN'T WORK ON CHROME-WINDOWS 7!
    </div>
</body>
</html>

Answer 1

似乎我的语法错误了。这是它应该如何：

   background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#000));

Answer 2

请注意，Chrome 16.0.912.75m在解析样式时仍有一个小的CSS错误/问题：

background:-webkit-linear-gradient  (top,gray 0,#A0A0A0 100%);

由于-webkit-linear-gradient和start括号之间的空格，这不起作用。删除其他空格将解决问题以及缩小CSS。

Answer 3

试试这个

background: -webkit-linear-gradient(#DDDDDD, #ffffff);

使用-webkit-gradient在Chrome中使用渐变背景

3 个答案: