无法使CSS变量在任何浏览器中工作

2024-05-20 • 问答

我无法使CSS变量正常工作，我正在执行以下操作：

:root {
  --base: #ffcd600;
  --spacing: 10px;
  --blur: 10px;
}

img {
  padding: var(--spacing);
  background: var(--base);
}

但是我看到的元素检查器如下所示：

   img {
      padding: var(--spacing);
      background: var(--base);
    }

--base: #ffcd600;

十六进制值中的字符过多。

对于您的要求有些困惑。但是使用提供的代码时，除了一个例外，我没有遇到任何问题。正如黑曜石所说的那样，你的十六进制有一个额外的价值。删除多余的0将起作用。如果您要像这样进行测试，您会看到什么？

:root {
  --base: #ffcd60;
  --spacing: 10px;
}
h1 {
  color: var(--base);
  padding: var(--spacing);
}

如果这也无法正确显示，那么您是否尝试清除缓存？