@property CSS at-rule 是 CSS Houdini API 的一部分, 它允许开发者显式地定义他们的 CSS 自定义属性，允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承，它极大的增强了原生CSS的能力，让以前实现的逻辑可以更加简化。
@property 语法
@property --my-property {
syntax: '<custom-syntax>';
inherits: false;
initial-value: <initial-value>;
}
syntax 和 inherits 描述符是必需的，如果其中任何一项缺失，整条规则都将失效并且会被忽略。initial-value 描述符仅在 syntax 描述符为通用 syntax 定义时是可选的，否则initial-value也是必需的——如果此时该描述符缺失，整条规则都将失效且被忽略。
@property 的优势
更好的语义：使用 @property 来定义自定义属性的类型，这告诉浏览器你的自定义属性保存了什么类型的数据（如百分比、数字、长度、颜色等）。 自定义初始值：使用 @property 可以为自定义属性设置初始值，当使用自定义属性时，如果赋的属性值是无效的，浏览器会使用默认值来渲染。 改进的错误处理：增强的类型安全性和设置备用值的能力为在CSS中进行测试和验证提供了新的机会。
@property 应用
1）@property 实现渐变效果：
下面demo实现鼠标hover到元素上后，背景色由粉->蓝变为粉-红的渐变色。
