CSS @property 规则

定义和用法

CSS @property 规则用于在样式表中直接定义自定义 CSS 属性，而无需运行任何 JavaScript。

@property 规则具有数据类型检查和约束功能，可以设置默认值，并定义属性是否可以继承值。

使用 @property 的好处：

• 类型检查和约束：必须指定自定义属性的数据类型，例如 <number>、<color>、<length> 等。这可以防止错误并确保正确使用自定义属性。
• 设置默认值：可以为自定义属性设置默认值。这确保了如果后续分配了无效值，浏览器会使用定义的回退值。
• 设置继承行为：必须指定自定义属性是否可以从其父元素继承值。

举例：定义自定义属性

@property --my-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}

上述定义表示 --my-color 是一个颜色属性，它可以从父元素继承值，且其默认值为 lightgray。

在 CSS 中使用自定义属性：

body {
  backgound-color: var(--my-color);
}

实例

例子 1

为渐变指定两个自定义属性 - 并使用它们来动画化渐变：

@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}

@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

亲自试一试

例子 2

指定两个自定义属性：一个用于项目大小，一个用于项目颜色：

@property --item-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --item-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}

亲自试一试

CSS 语法

@property --propertyname {
  syntax: "<color>";
  initial-value: red;
  inherits: false;
}

属性值

浏览器支持

表格中的数字表示首个完全支持该 @ 规则的浏览器版本。

相关页面

教程：CSS @property 规则