CSS Validator error = Value Error : background 100% is not a color-stop value )

Question

我是编程新手，我将一个代码片段导入到 CSS 以获得链接上的悬停效果。当我通过 W3C CSS Validator 推送代码时，我收到一个来自此导入代码的错误。

我不明白我可以做些什么来消除错误，因为悬停效果非常完美。

谁能帮帮我？将不胜感激！

错误：

Value Error : background 100% is not a color-stop value )

代码：

:root {
  --mainColor: #ffc7c7;
}

.details-schedule {
  align-items: center;
  display: flex;
  font-family: 'Libre Franklin', sans-serif;
  font-size: 16px;
  justify-content: center;
}

.details-schedule a {
  background:
     linear-gradient(
       to bottom, var(--mainColor) 0%,
       var(--mainColor) 100%
     );
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 4px 4px;
  color: #000;
  text-decoration: none;
  transition: background-size .6s;
}

.details-schedule a:hover {
  background-size: 4px 50px;
}

Answer 1

这似乎是 W3C CSS 验证器的一个怪癖，一个错误。任何值，例如2%，产生相同的错误。

如果您将第二个 var(—mainColor) 替换为实际颜色，例如蓝色，或替换为 —mainColor 的十六进制值，那么验证器会很高兴，因此如果通过验证对您的项目很重要，那么也许可以这样做现在。

顺便说一下，验证器也无法处理像 rgba(0,0,0,1) 这样的颜色，所以它似乎在解析括号时遇到了问题。

CSS Validator error = Value Error : background 100% is not a color-stop value )

CSS Validator error = Value Error : background 100% is not a color-stop value )

css

error-handling

w3c-validation

w3-css