0

我对编程很陌生，我在我的 CSS 中导入了一个代码片段，以获得链接上的悬停效果。当我通过 W3C CSS Validator 推送代码时，我收到一个来自此导入代码的错误。

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

谁能帮我？将不胜感激！

错误：

值错误：背景 100% 不是颜色停止值）

代码：

: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;
}

4

1 回答 1

0

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

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

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

于 2020-11-09T18:06:21.877 回答