CSS3 渐变在任何浏览器中都不起作用

Question

我已经在互联网上搜索了 2 天，但我一直无法找到我的问题的答案：CSS 在我的代码中，在任何浏览器中，线性渐变都不起作用。我在 fiddles 中看到了有效的渐变，在其他网站上也看到了有效的渐变。我什至尝试将他们的代码复制并粘贴到我的代码中，但它不起作用。我只得到了我的后备的纯背景颜色。我什至对我的拼写进行了三重检查，以确保某些东西不是 PEBCAK 错误……当我尝试将我的代码放入 fiddle 时，它仍然无法正常工作。我很困惑...有人看到我做错了什么吗？

我的研究之路始于此处的一个答案，该答案解释了渐变需要一个高度，因此我看到了主体设置最小高度的技巧。然后我看到大部分人的渐变都在divs，所以我加了一个测试div试试，设置高度100px。没有任何效果。这是我当前的测试代码：

我的HTML:

<body>
<div>

    <div class="gradient">
        This is a test
    </div>

</div>
</body>

CSS:

*, html {
margin:0;
padding:0;
font-family:Calibri;
}

body {
min-height: 100vh;
background: #64647f;
background: linear-gradient (to bottom, #64647f 0%, #b2b2c2 20%);
}

.gradient {
border: 1px solid black;
height: 100px;
background: linear-gradient (red, yellow);
}

正文才是我真正关心的（为页面设置背景）。我尝试添加带有渐变 class 的 div 和刚刚命名的颜色作为从另一个页面复制粘贴，看看它是否可行。

是的，我知道它不向后兼容，我会在我自己让它正常工作后到达那里。我是运行 Chrome 版本 50.0.2661.75 m，在 Windows 10 上。还在 IE (Edge) 和 Firefox 中测试过它……甚至没有一点渐变的提示见过。我什至尝试了 Chrome 的 -webkit- 前缀只是为了看看它是否有效......没有骰子。

这是一个 fiddle 代码，任何人都可以玩：https://jsfiddle.net/e0p48ubf/2/

Answer 1

我现在是所有PEBCAK用户中的女王...谢谢Harry指出我的问题：

正确的语法是 linear-gradient(...) <-- 注意，梯度和 (

之间没有 space

我羞愧地低下了头...再次感谢哈利！

Answer 2

您需要删除渐变声明后和括号开头的 space。

背景：线性渐变（到底部，#64647f 0%，#b2b2c2 20%）；

背景：线性渐变（红色，黄色）；

CSS3 渐变在任何浏览器中都不起作用

CSS3 gradients not working in any browser

html

css

linear-gradients

css-gradients