css - 如何更新 box-shadow 属性的单个值？

Question

我想覆盖 box-shadow 上的距离，而不必再次设置颜色。

这里的用例是我有一个 .button 类:

.button {
  color: white;
  background: blue;
  padding: 8px 15px;
  font-size: 1.2em;
  border: 3px solid black;
  box-shadow: 0 3px 0 black;
}

然后我有一个 .button-small 类，它实际上是 .button 的子类，它对事物进行了一些小的调整。

.button.button-small {
  padding: 4px 10px;
  font-size: 1em;
  border-width: 2px;
  box-shadow: 0 2px 0 black;
}

如您所见，我可以轻松更改 border-width，而无需重新定义整个 border 属性。

有没有办法用 box-shadow 做到这一点？某种 box-shadow-distance 属性？

Answer 1

使用 CSS 变量:

.button {
  color: white;
  background: blue;
  padding: 8px 15px;
  font-size: 1.2em;
  border: 3px solid black;
  box-shadow: 0 var(--d, 5px) 0 black; /* 5px is the fallback/default value until you set the variable */
}

.button.button-small {
  --d: 2px;
}

<span class="button">button</span>

<span class="button button-small">button</span>

<span class="button" style="--d:8px;">button</span>