CSS @property 规则
示例
为渐变指定两个自定义属性 - 并使用它们来制作渐变动画
@property --startColor {
syntax: "<color>";
initial-value: #EADEDB;
inherits: false;
}
@property --endColor {
syntax: "<color>";
initial-value: #BC70A4;
inherits: false;
}
自己动手试一试 »
更多“自己尝试”的例子见下文。
定义和用法
@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);
}
浏览器支持
表格中的数字表示完全支持该规则的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| @property | 85 | 85 | 128 | 16.4 | 71 |
CSS 语法
@property --propertyname {
syntax: "<color>";
initial-value: red;
inherits: false;
}
属性值
| 值 | 描述 |
|---|---|
| --propertyname | 必需。自定义属性的名称。 |
| syntax initial-value inherits |
syntax 的合法值：可以是 <length>、<number>、<percentage>、<length-percentage>、<color>、<image>、<url>、<integer>、<angle>、<time>、<resolution>、<transform-function> 或 <custom-ident>，或数据类型和关键字值列表。 +（空格分隔）和 #（逗号分隔）乘数表示期望值列表，例如 <color># 表示期望的语法是 <color> 值的一个逗号分隔列表。 垂直线 (|) 可以创建期望语法的“或”条件，例如 <length> | auto 接受 <length> 或 auto，而 <color># | <integer># 则期望 <color> 值或 <integer> 值的逗号分隔列表。 initial-value 的合法值：设置属性的初始值。 inherits 的合法值： True 或 false。控制 @property 指定的自定义属性是否默认继承。 |
更多示例
示例
指定两个自定义属性：一个用于项目大小，一个用于项目颜色
@property --item-size {
syntax: "<percentage>";
inherits: true;
initial-value: 50%;
}
@property --item-color {
syntax: "<color>";
inherits: false;
initial-value: lightgray;
}
自己动手试一试 »
相关页面
CSS 教程：CSS - @property 规则
