Можно ли переопределить расстояние 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>

Answer 2

В отличие от других свойств, таких как граница, в которой части разбиты на подвойства, свойство box-shadow стоит отдельно. Это означает, что еще более важно принять к сведению порядок, в котором указаны детали, в частности значения длины. Свойство box-shadow