"Unknown property value" 使用 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

您应该删除 linear-gradient、'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

Always try using deg or rad for the gradient direction , since it will provide the all kind of directions . if you want to write using the words , then there is no hyphen in between the 'to-right'. It will be to right . if you are using degree you can try (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>

"Unknown property value" 使用 CSS3 渐变时出错

"Unknown property value" error when using CSS3 gradient

css

gradient