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

Question

我在使 CSS 变量起作用时遇到问题，我正在执行以下操作：

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

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

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

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

Answer 1

--base: #ffcd600;

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

Answer 2

有点不明白你在问什么。但是在使用提供的代码时，我没有遇到任何问题，只有一个例外。正如 Obsidian 所说，您的 Hex 具有额外的价值。删除额外的 0 将起作用。如果你像这样测试它，你会看到什么？

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

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

Unable to get CSS variables to work in any browser