Question

我已经在互联网上搜索了2天了，我一直无法找到问题的答案：CSS线性渐变在我的代码中，在任何浏览器中都不起作用。我已经看到了小提琴的渐变效果，以及其他有效的网站。我甚至尝试过将代码复制并粘贴到我的代码中，但它不起作用。我只得到了我的后备的简单背景颜色。我甚至三次检查我的拼写只是为了确保某些东西不是PEBCAK错误...当我尝试将我的代码放入小提琴时，它仍然无效。我很难过......有没有人看到我做错了什么？

我的研究开始在这里解答了解释渐变需要高度的答案，所以我看到了身体设置最小高度的技巧。然后我看到大多数人都有div的渐变，所以我添加了一个测试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);
}

身体真的是我关心的（设置页面的背景）。我尝试使用渐变类添加div，只使用命名颜色作为来自其他页面的复制粘贴，以查看它是否可行。

是的，我知道它不是向后兼容的，我会在我能让它为我自己正常工作后到达那里。我在Windows 10上运行Chrome版本50.0.2661.75米。还在IE（Edge）和Firefox中测试过它......甚至没有看到渐变的暗示。我甚至尝试了Chrome的-webkit-前缀，看看它是否有用......没有骰子。

以下是所有人都可以使用的代码的小提琴：https://jsfiddle.net/e0p48ubf/2/

Answer 1

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

正确的语法是线性渐变（...）＆lt; - 注意，渐变和（

）之间没有空格

我垂头丧气......再次感谢，哈利！

Answer 2

您需要在渐变声明和括号开头后删除空格。

背景：线性渐变（到底部，＃64647f 0％，＃b2b2c2 20％）;

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

CSS3渐变无法在任何浏览器中使用

2 个答案: