为 CSS 强化做好准备！现在，所有现代浏览器均完全支持 @property 规则（CSS Houdini API 范围的一部分）。这项颠覆性功能将 CSS 自定义属性（也称为 CSS 变量）的控制和灵活性提升到新的水平，让您的样式表更加智能和动态。
@property 的优势
- 语义含义：使用
@property定义自定义属性的类型（语法）。这将告知浏览器，您的自定义属性包含哪些类型的数据（例如颜色、长度或数字），防止出现意外结果并支持新可能性，例如为渐变添加动画效果。 - Fallback values：再也不需要消失的样式了！使用
@property为自定义属性设置初始值。如果稍后分配了无效值，浏览器会正常地使用您定义的回退。 - 改进了错误处理方式：字体安全增强，并且能够设置后备广告，为您开辟了直接在 CSS 中进行测试和验证的新机会。
创建高级自定义属性
如需创建“标准”自定义属性，请设置属性名称，后跟 --，并为此属性指定一个值。浏览器会将这些自定义属性的值解析为字符串。
以下示例展示了如何初始化默认（基于字符串的）自定义属性。
:root {
--myColor: hotpink;
}
若要获享这些“高级自定义属性”的优势（包括字符串之外的语义），请向 @property 注册您的 CSS 自定义属性。
在此示例中，同一自定义属性使用 @property 进行了初始化。
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
使用 @property 初始化的自定义属性提供更多详细信息，而不仅仅是名称和值。它包含语法类型，并将继承设置为 true 或 false。
这种方法的优势在于，对于标准属性，您希望该属性包含颜色值，并将在样式表的其他位置使用该颜色。如果有人要更新该属性，使其包含数字值，则在其他位置使用该属性的操作将会失败。使用 @property 定义了一种后备颜色，以及用于声明此属性的 syntax 必须具有颜色值。如果使用非颜色值，则将使用后备值。
演示：闪烁渐变背景
@property 的一个巧妙应用是，为以前无法转换的属性（如渐变）提供平滑的动画效果，这些属性被浏览器视为图片。不过，如果您通过 @property 为变量赋予语法含义，则可以在梯度语句中使用这些变量。现在，您要描述渐变中两个声明值之间的动画，从而启用动画。请看以下示例：一张卡片，带有一个微妙的背景动画，该动画由两种在不同时间轴上改变颜色的径向渐变组成：
@property 为背景渐变中的动画颜色设置样式。这可以通过将自定义属性值设置为颜色来实现：
@property --card-bg {
syntax: "<color>";
inherits: false;
initial-value: lavender;
}
@property --shine-1 {
syntax: "<color>";
inherits: false;
initial-value: wheat;
}
@property --shine-2 {
syntax: "<color>";
inherits: false;
initial-value: lightpink;
}
然后，访问它们以创建初始渐变背景：
.card {
background: radial-gradient(
300px circle at 55% 60% in oklab,
var(--shine-2), transparent 100% 100%),
radial-gradient(farthest-side circle at 75% 30% in oklab,
var(--shine-1) 0%, var(--card-bg) 100%);
}
此外，您还可以更新关键帧中的值：
@keyframes animate-color-1 {
to {
--shine-1: orange;
}
}
@keyframes animate-color-2 {
to {
--shine-2: hotpink;
}
}
然后为每个元素添加动画效果：
animation: animate-color-1 8s infinite linear alternate, animate-color-2 1s infinite linear alternate;
总结
CSS 注册的自定义属性是一项非常强大的功能，它通过为 CSS 变量提供含义和上下文来扩展 CSS 语言。现在，随着 @property 进入基准，此 CSS 超能力的实力正在不断提升。