CSS @property 规则
示例
指定渐变的两个自定义属性 - 并用它来动画化渐变
@property --startColor {
syntax: "<color>";
initial-value: #EADEDB;
inherits: false;
}
@property --endColor {
syntax: "<color>";
initial-value: #BC70A4;
inherits: false;
}
亲自尝试 »
更多“亲自尝试”示例如下。
定义和用法
The @property 规则用于在样式表中直接定义自定义 CSS 属性，而无需运行任何 JavaScript。
The @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 |
语法合法值：可以是 <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 规则
