Question

使用W3 CSS validator时出现此错误

值错误：背景线性渐变（顶部，＃fefefe，＃dddddd）不是a background-color value：线性渐变（top，＃fefefe，＃dddddd）

这一行：

  background:  linear-gradient(top, #fefefe, #dddddd);

以及：

  background:  -webkit-linear-gradient(top, #fefefe, #dddddd);

当我尝试使用渐变时，

和其他行。

渐变有效，但我使用了错误的语法吗？

Answer 1

CSS3尚未最终确定，这意味着验证器可能无法验证最新的CSS3工作草案。此外，验证器可能不会验证供应商特定的CSS，如-moz- *或-webkit - *

有关使用线性渐变的规范，请参阅w3的most recent draft。

顺便说一下，我相信代码中的“顶部”应该是“顶部”作为渐变的方向。草案中的例12：

以下是指定基本垂直渐变的各种方法：

linear-gradient(yellow, blue);
linear-gradient(to bottom, yellow, blue);
linear-gradient(180deg, yellow, blue);
linear-gradient(to top, blue, yellow);
linear-gradient(to bottom, yellow 0%, blue 100%);

Answer 2

您在验证器上选择了哪个版本的CSS？是否设置为CSS3？我知道验证器会抛出奇怪的错误，实际上我的代码没有任何问题。

Answer 3

尝试使用以下生成器：

http://www.colorzilla.com/gradient-editor/

这将为您提供所有浏览器的正确语法。

Answer 4

w3c的验证器使用w3c的建议。 linear-gradient未成为w3c的推荐，因此在技术上并非“有效”。其他浏览器供应商已经开始实施工作草案中指定的内容（希望它从现在开始直到w3c最终确定规范时不会有太大变化）。这就是为什么您需要供应商前缀才能工作的原因。

Answer 5

只要渐变不是最终规范的一部分，w3c验证器就会抛出错误。不要依赖验证器来处理草案状态中的“实验”功能。

所以，您的语法很好，但要注意浏览器中的不同实现。

Answer 6

值错误：宽度分析错误 - 90px）

宽度：计算（100％ - 90px）;宽度：-moz-calc（100％ - 90px）; width：-webkit-calc（100％ - 90px）;

W3 CSS验证|渐变的值误差

6 个答案: