html - 在变量中使用 CSS 变量

Question

我想在变量内部使用 CSS 变量，这样如果内部变量发生变化，外部变量就会自行更新。

像这样：

:root {
  --shadow-color: red;
  --shadow: 0 0 10px var(--shadow-color);
}

button {
  box-shadow: var(--shadow);
}

button:hover {
  --shadow-color: blue;
}

所以... on button:hover，--shadow-color变化，但--shadow没有。有没有办法通过引用而不是CSS中的值来传递变量？

标签： htmlcsscss-variables