为什么 CSS 变量在按钮中不起作用？

Question

如果我使用十六进制颜色，效果会很好。不知道为什么自定义属性不起作用。

我尝试了所有方法，但没有成功:( {我正在使用 chrome}

:root {
  --primary-color: hsl(0, 0% 20%);
}

.btn {
  display: inline-block;
  padding: 0.7rem 1.2rem;
  /* border: none; */
  background-color: var(--primary-color);
  /* color: #fff; */
}

<button class="btn">Read More</button>

Answer 1

HSL第二个参数后需要加逗号,

由于您没有提供所需颜色的图像，我猜这是错误的，您正在寻找灰色。

:root {
  --primary-color: hsl(0, 0%, 20%)
}

body {
  background: var(--primary-color)
}

为什么 CSS 变量在按钮中不起作用？

Why CSS variable is not working in button?

html

css

css-variables