自定义css属性

梗概

• 使用@property

适用范围

• 非常新，部分浏览器24年7月才更新这个功能

与css变量的区别：

• CSS变量是在CSS中定义的一种可重用的值，而自定义CSS属性是一种更灵活的方式来定义和使用属性。
• 自定义CSS属性通过@property规则在CSS中声明，可以为属性定义数据类型、初始值、计算方法等。

使用方法

定义自定义属性

要定义一个自定义属性，我们需要使用 @property 规则，并指定属性的名称、类型和初始值。例如：

@property --my-custom-color {
  syntax: '<color>';
  initial-value: red;
}

使用自定义属性

定义了自定义属性之后，我们可以在 CSS 中使用它。例如：

.element {
  color: var(--my-custom-color);
}

修改自定义属性的值

通过 JavaScript 可以动态地修改和控制自定义属性的值。例如：

document.documentElement.style.setProperty('--my-custom-color', 'blue');

father:: CSS