现在 CSS 自定义属性已经成为现实，所有值部分都可以单独更改

在 CSS 中，一些属性有简写形式。一个属性可以接受分隔的值。正如人们所说，语法糖 使编写更容易。例如 transition，可能看起来像这样

.element {
  transition: border 0.2s ease-in-out;
}

我们可以这样写

.element {
  transition-property: border;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

简写值的每个“部分”都有它自己的映射属性。但并非所有情况都如此。以 box-shadow 为例

.element {
  box-shadow: 0 0 10px #333;
}

这不是其他属性的简写。没有 box-shadow-color 或 box-shadow-offset。

这就是自定义属性来拯救我们！

我们可以像这样设置它

:root {
  --box-shadow-offset-x: 10px;
  --box-shadow-offset-y: 2px;
  --box-shadow-blur: 5px;
  --box-shadow-spread: 0;
  --box-shadow-color: #333;
}

.element {
  box-shadow:
    var(--box-shadow-offset-x)
    var(--box-shadow-offset-y)
    var(--box-shadow-blur)
    var(--box-shadow-spread)
    var(--box-shadow-color);
}

可能有点冗长，但可以完成工作。

现在我们已经做到了，请记住我们得到了一些独特酷炫的东西

1. 我们可以用 JavaScript 更改单个值。例如

   document.documentElement.style.setProperty("--box-shadow-color", "green");

2. 如果需要，可以使用层叠。如果我们在比 :root 更具体的任何选择器上设置 --box-shadow-color: blue，我们将覆盖该颜色。

回退也是可能的，以防变量根本没有设置

.element {
  box-shadow:
    var(--box-shadow-offset-x, 0)
    var(--box-shadow-offset-y, 0)
    var(--box-shadow-blur, 5px)
    var(--box-shadow-spread, 0)
    var(--box-shadow-color, black);
}

---

变换怎么样？它们很有趣，因为它们采用以空格分隔的值列表，因此它们中的每一个都可以是自定义属性

:root {
  --transform_1: scale(2);
  --transform_2: rotate(10deg);
}

.element{
  transform: var(--transform_1) var(--transform_2);
}

---

对于确实具有简写形式的单个属性，但也提供以逗号分隔的多个值的元素怎么办？另一个很棒的用例

:root {
  --bgImage: url(basic_map.svg);
  --image_1_position: 50px 20px;
  --image_2_position: bottom right;
}

.element {
  background: 
    var(--bgImage) no-repeat var(--image_1_position),
    var(--bgImage) no-repeat var(--image_2_position);
}

或者过渡？

:root {
  --transition_1_property: border;
  --transition_1_duration: 0.2s;
  --transition_1_timing_function: ease;
  
  --transition_2_property: background;
  --transition_2_duration: 1s;
  --transition_2_timing_function: ease-in-out;
}

.element {
  transition: 
    var(--transition_1_property) 
    var(--transition_1_duration) 
    var(--transition_1_timing_function),
    var(--transition_2_property) 
    var(--transition_2_duration) 
    var(--transition_2_timing_function),
}

Dan Wilson 最近 使用这种方法 与动画一起展示了如何暂停单个动画！

---

以下是浏览器支持情况