使用 CSS3 渐变时出现“未知属性值”错误

Question

我对一个矩形div使用了线性渐变，如下图：

.rectangle {
  width:            300px;
  height:           200px;
  background-image: linear-gradient(to-right, #009A80 0%, #333 0%, #333 100%);
}

<div class="rectangle"></div>

但是背景不渲染。在 Chrome 开发工具中，它显示“未知属性值”。我假设语法有问题，但找不到问题。

Answer 1

您应该删除线性梯度的第一个参数中的连字符，'to-right'。

请看下面的代码：

.rectangle {
  width:            300px;
  height:           200px;
  background-image: linear-gradient(to right, #009A80 0%, #333 0%, #333 100%);
}

<div class="rectangle"></div>

Answer 2

总是尝试使用 deg 或 rad 作为渐变方向，因为它会提供所有类型的方向。 如果您想使用单词 来书写，则在“to-right”之间没有没有连字符。 它将是 to right 。 如果您使用学位，您可以尝试 (0deg,#111,#333,#444)

.rectangle {
  width: 300px;
  height: 200px;
  background-image: linear-gradient(to right, #009A80 0%, #333 0%, #333 100%);
}

<div class="rectangle"></div>