手册
目录
CSS @property 规则用于在样式表中直接定义自定义 CSS 属性，而无需运行任何 JavaScript。
@property 规则具有数据类型检查和约束功能，可以设置默认值，并定义属性是否可以继承值。
使用 @property 的好处：
@property --my-color {
syntax: "";
inherits: true;
initial-value: lightgray;
}
上述定义表示 --my-color 是一个颜色属性，它可以从父元素继承值，且其默认值为 lightgray。
在 CSS 中使用自定义属性：
body {
backgound-color: var(--my-color);
}
为渐变指定两个自定义属性 - 并使用它们来动画化渐变：
@property --startColor {
syntax: "";
initial-value: #EADEDB;
inherits: false;
}
@property --endColor {
syntax: "";
initial-value: #BC70A4;
inherits: false;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
指定两个自定义属性：一个用于项目大小，一个用于项目颜色：
@property --item-size {
syntax: "";
inherits: true;
initial-value: 50%;
}
@property --item-color {
syntax: "";
inherits: false;
initial-value: lightgray;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
@property --propertyname {
syntax: "";
initial-value: red;
inherits: false;
}
| 值 | 描述 |
|---|---|
| --propertyname | 必需。自定义属性的名称。 |
| syntax |
可以是 +（空格分隔）和 #（逗号分隔）乘数表示期望一个值列表，例如 竖线（|）可以为期望的语法创建“或”条件，例如 |
| initial-value | 设置属性的初始值。 |
| inherits | true 或 false。控制由 @property 指定的自定义属性注册是否默认继承。 |
表格中的数字表示首个完全支持该 @ 规则的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 85 | 85 | 128 | 16.4 | 71 |
教程：CSS @property 规则
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
71万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习
