CSS3 渐变不适用于任何浏览器

Question

I have scoured the internet for 2 days now and I have been unable to find an answer to my problem: CSS linear-gradient is not working in my code, in any browser.我已经在互联网上搜索了 2 天，但一直无法找到我的问题的答案：CSS linear-gradient 在我的代码中不起作用，在任何浏览器中。 I have seen gradients in fiddles that work, and on other websites that work.我在有效的小提琴和其他有效的网站上看到了渐变。 I have even tried copying and pasting their code into mine and it does not work.我什至尝试将他们的代码复制并粘贴到我的代码中，但它不起作用。 I get only the plain background color that is for my fallback.我只得到用于我的后备的纯背景颜色。 I've even triple-checked my spelling just to make sure that something isn't a PEBCAK error... When I tried putting my code into a fiddle, it still did not work.我什至对我的拼写进行了三重检查，以确保某些东西不是 PEBCAK 错误......当我尝试将我的代码放入小提琴时，它仍然无法正常工作。 I'm stumped... does anyone see what I'm doing wrong?我很难过......有没有人看到我做错了什么？

My research trail started with an answer here that explained gradients need a height, so I saw a trick for the body to set the min-height.我的研究路径从这里的一个答案开始，该答案解释了梯度需要一个高度，所以我看到了一个让身体设置最小高度的技巧。 Then I saw that most people had gradients in divs, so I added a test div to try it out with a set height of 100px.然后我看到大部分人在div里面都有渐变，所以我加了一个测试div来试试，设置高度为100px。 Nothing has worked.没有任何效果。 Here's my current test code:这是我当前的测试代码：

My HTML:我的 HTML：

<body>
<div>

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

</div>
</body>

CSS: 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);
}

The body is really what I care about (to set up the background for the page).正文才是我真正关心的（为页面设置背景）。 I tried adding the div with gradient class with just named colors as a copy-paste from another page to see if it would work.我尝试添加带有渐变类的 div，仅命名颜色作为来自另一个页面的复制粘贴，以查看它是否有效。

Yes, I know it is not backwards compatible, I'll get there after I can get it to work normally for myself.是的，我知道它不向后兼容，我会在让它为自己正常工作后到达那里。 I'm running Chrome Version 50.0.2661.75 m, on Windows 10. Have also tested it in IE (Edge) and Firefox... not even a hint of a gradient to be seen.我在 Windows 10 上运行 Chrome 版本 50.0.2661.75 m。还在 IE (Edge) 和 Firefox 中对其进行了测试......甚至没有看到渐变的迹象。 I even tried the -webkit- prefix for Chrome just to see if that'd work... no dice.我什至尝试了 Chrome 的 -webkit- 前缀，只是为了看看它是否有效......没有骰子。

Here's a fiddle with said code for anyone to play with: https://jsfiddle.net/e0p48ubf/2/这是任何人都可以玩的上述代码的小提琴： https : //jsfiddle.net/e0p48ubf/2/

Answer 1

I am the queen of all PEBCAK users right now... Thank you Harry for pointing out my problem:我现在是所有 PEBCAK 用户中的女王……谢谢 Harry 指出我的问题：

Proper syntax is linear-gradient(...) <-- note, no space between gradient and (正确的语法是 linear-gradient(...) <-- 注意，gradient 和 (

I hang my head in shame... Thanks again, Harry!我羞愧地低下了头……再次感谢，哈利！

Answer 2

You need to remove the space after your gradient declaration and the start of the parentheses.您需要删除渐变声明之后的空格和括号的开头。

background: linear-gradient(to bottom, #64647f 0%, #b2b2c2 20%);背景：线性渐变（到底部，#64647f 0%，#b2b2c2 20%）；

background: linear-gradient(red, yellow);背景：线性渐变（红色，黄色）；

CSS3 渐变不适用于任何浏览器

问题描述

2 个解决方案

解决方案1
0 已采纳 2016-04-21 14:55:05

解决方案2
0 2016-04-21 14:55:29

CSS3 渐变不适用于任何浏览器

问题描述

2 个解决方案

解决方案1 0 已采纳 2016-04-21 14:55:05

解决方案2 0 2016-04-21 14:55:29

解决方案1
0 已采纳 2016-04-21 14:55:05

解决方案2
0 2016-04-21 14:55:29