CSS 之 自定义属性（变量）

在CSS中，自定义属性（也被称为CSS变量）可以让你创建可以在整个文档中重复使用的动态值。这些变量可以用于存储颜色值、长度值、字体名称等。

自定义属性的使用方法如下：

1. 定义自定义属性：在选择器中使用--前缀来定义自定义属性。
2. 使用自定义属性：使用var()函数来使用自定义属性。

例如：

:root {
  --main-bg-color: coral;
  --main-text-color: #333;
  --main-font-size: 16px;
}
 
body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
  font-size: var(--main-font-size);
}
 
/* 使用自定义属性的例子 */
.button {
  background-color: var(--main-bg-color);
  border: 1px solid var(--main-text-color);
  padding: 10px var(--main-font-size);
}

在这个例子中，我们定义了三个自定义属性--main-bg-color、--main-text-color和--main-font-size。然后在body选择器和.button类中使用这些变量。这样，如果你想要更改颜色或字体大小，只需要改变自定义属性的值即可，所有使用这个变量的地方都会自动更新。