假设您一直在为网站构建一些初始样式，并且发现自己在 CSS 中重复使用了一些值。您将 dodgerblue 用作主色，并将其添加到按钮边框、链接文字、标题背景中，还使用设计工具为网站的其他部分选择了一些蓝色变体。然后，您会获得样式指南，并且主要颜色现在为 oklch(70% 0.15 270)。
借助自定义属性（或 CSS 变量），您可以整理和重复使用 CSS 中的值，从而使样式更灵活且更易于理解。
创建媒体资源
创建媒体资源的最简单方法是，为具有您定义的名称的新媒体资源设置值。
.card {
--base-size: 1em;
}
所有属性名称都必须以两个短划线开头。这样可防止您尝试将现有 CSS 属性名称用于自定义值。CSS 规范永远不会添加以两个短划线开头的属性。
然后，可以使用 var() 函数访问此属性。此示例将 .card-title 中的字体大小设置为 --base-size 值的两倍。
.card .card-title {
font-size: calc(2 * var(--base-size));
}
使用自定义属性
如您所见，您可以使用 var() 函数获取自定义属性的值。您可以在值中使用 var() 函数，但不能在媒体查询中使用。它们尤其适合作为其他 CSS 函数的实参。
后备广告
如果您尝试使用未设置值的自定义属性，会发生什么情况？var() 函数会接受第二个值，该值将用作回退值。回退值甚至可以是具有嵌套 var() 的另一个自定义属性。
#my-element {
background: var(
--alert-variant-background,
var(--alert-primary-background)
);
}
无效值
如果自定义属性解析为无效值（例如，background-color 属性的值为 1em），则该元素上针对该属性的其他有效声明将不会使用。这是因为浏览器在计算值时，只有在舍弃其他声明后才能知道某个值是否无效。而是使用继承值或初始值。
.content {
background-color: blue;
}
.content.invalid {
--length: 2rem;
background-color: var(--length);
}
在上面的示例中，.invalid 元素不会有蓝色背景。相反，由于 background-color 不会继承，因此该值为 transparent（即其初始值）。
替换和沿用
在大多数情况下，您需要自定义属性的默认行为，即值继承。当您为某个属性设置新值时，相应元素及其所有子元素都将具有该值，直到该值被另一个值替换为止。
自定义属性由层叠决定，因此也可以被更具体的选择器替换。
使用 @property 获得更多控制权
通过设置值创建的自定义属性可以是任何类型，并且可以继承。如需更好地控制自定义属性，您可以使用 @property 规则。
我们之前创建的 --base-size 属性相当于以下 @property 声明。
@property --base-size {
syntax: "*";
inherits: true;
initial-value: 18px;
}
syntax 值用于设置该属性的有效 CSS 值类型。如果您为该属性设置了其他类型，则该属性将无效，并回退到初始值或在层叠中设置得更高的继承值。
使用 @property 创建自定义属性时，您可以使用 inherit: false 停用继承。替换已停用继承功能的自定义属性的值会更改所选元素的值，但不会更改其子元素的值。当多个选择器定位同一元素时，此属性通常非常有用。
initial-value 设置属性的值，除非稍后更改。除非语法为 *（表示任何 CSS 类型），否则 @property 必须设置 initial-value。这可确保该属性始终具有指定语法的值，并且永远不会处于未定义状态。
使用 JavaScript 更新自定义属性
可以使用 JavaScript 更新元素上自定义属性的值，从而动态更新网站的样式。
const element = document.getElementById("my-button");
getComputedStyle(element).setPropertyValue("--color", orange);
此示例更新了 #my-button 元素上的样式标记，并在开发者工具中检查该元素，结果如下所示：
<button id="my-button" style="--color: orange">Click me</button>
在上面的示例中，您可以看到如何通过访问存储在自定义 HTML 属性中的数据来设置自定义属性。每个按钮都有一个 data-color 属性，其值为特定颜色。无论点击哪个按钮，设置在 body 元素上的 --background 自定义属性都会重置为 data-color 的值。
您还可以使用 getComputedStyle(element).getPropertyValue("--variable") 获取特定元素上属性的值。如果您的逻辑需要响应级联值，这会很有用。