手册
目录
收藏309
分享
阅读2651
更新时间2025-07-16
@property 规则用于直接在样式表中定义自定义 CSS 属性，而无需运行任何 JavaScript。
@property 规则具有数据类型检查和约束、设置默认值，并定义属性是否可以继承值。
定义自定义属性的实例：
@property --myColor {
syntax: "";
inherits: true;
initial-value: lightgray;
}
上面的定义表示 --myColor 是一个颜色属性，它可以继承父元素的值，其默认值为 lightgray。
要在 CSS 中使用自定义属性，我们使用 var() 函数：
body {
backgound-color: var(--myColor);
}
使用 @property 的好处：
表格中的数字表示完全支持该规则的第一个浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 85 | 85 | 128 | 16.4 | 71 |
下例定义了两个自定义属性：--my-bg-color 和 --my-txt-color。然后，div 在 background-color 和 color 中使用自定义属性：
@property --my-bg-color {
syntax: "";
inherits: true;
initial-value: lightgray;
}
@property --my-txt-color {
syntax: "";
inherits: true;
initial-value: darkblue;
}
div {
width: 300px;
height: 150px;
padding: 15px;
background-color: var(--my-bg-color);
color: var(--my-txt-color);
}
运行实例 »点击 "运行实例" 按钮查看在线实例
在下例中，我们在
.fresh 和 .nature 类中覆盖自定义属性（通过设置其他颜色），效果非常好：
@property --my-bg-color {
syntax: "";
inherits: true;
initial-value: lightgray;
}
div {
width: 300px;
height: 150px;
padding: 15px;
background-color: var(--my-bg-color);
}
.fresh {
--my-bg-color: #ff6347;
}
.nature {
--my-bg-color: rgb(120, 180, 30);
}
运行实例 »点击 "运行实例" 按钮查看在线实例
在下例中，我们将 .nature 类中的自定义属性设置为整数。这是无效的，浏览器将使用在 initial-value 属性中定义的备用颜色（lightgray）：
@property --my-bg-color {
syntax: "";
inherits: true;
initial-value: lightgray;
}
div {
width: 300px;
height: 150px;
padding: 15px;
background-color: var(--my-bg-color);
}
.fresh {
--my-bg-color: #ff6347;
}
.nature {
--my-bg-color: 2;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
在下例中，我们将 inherits 值设置为 false。这意味着自定义属性不会从其父元素继承值。查看结果：
@property --my-bg-color {
syntax: "";
inherits: false;
initial-value: lightgray;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
下一个例子将 inherits 值设置为 true。这意味着自定义属性会从其父元素继承值。查看结果：
@property --my-bg-color {
syntax: "";
inherits: true;
initial-value: lightgray;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
使用 @property 规则可以实现的全新机会是动画化以前无法动画化的内容：渐变。查看以下实例：
为渐变指定两个自定义属性：
@property --startColor {
syntax: "";
initial-value: #EADEDB;
inherits: false;
}
@property --endColor {
syntax: "";
initial-value: #BC70A4;
inherits: false;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
| 属性 | 描述 |
|---|---|
| @property | 直接在样式表中定义自定义 CSS 属性，而无需运行任何 JavaScript。 |
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77.2万人学习
共29课时
61.9万人学习
共25课时
39.4万人学习
共43课时
71.1万人学习
共25课时
61.8万人学习
共22课时
23万人学习
共28课时
34万人学习
共89课时
125.5万人学习
