@property

允许 Web 开发者显式地定义他们的 CSS 自定义属性，而且允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承

语法

属性

@property --property-name 中的 --property-name 就是自定义属性的名称，定义后可在 CSS 中通过 var(--property-name) 进行引用
syntax：该自定义属性的语法规则，也可以理解为表示定义的自定义属性的类型
inherits：是否允许继承
initial-value：初始值

@property 规则中的 syntax 和 inherits 描述符是必需的

@property --custom-property-name {
    syntax: "<color>";
    inherits: false;
    initial-value: #c0ffee;
}

CSS.registerProperty({
  name: "--custom-property-name",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee"
});

支持的 syntax 语法类型

<length> ：任何有效的长度值，例如 10px ，10vw 等
<number> ：任何有效的数字值，例如 1 、1000 等
<percentage> ：任何有效的百分比值，例如 10%
<length-percentage> ：任何有效的长度值（<length>）或百分比值（<percentage>），例如 10px 或 10%
<color> ：任何有效的颜色值，例如 red 、#fff 、rgb(0 0 0) 等
<image> ：任何有效的图像值，例如 url() 函数引入的图像，<gradient> （渐变）绘制的图像等
<url> ：任何有效的 url 值，例如 url(star.png)
<integer> ：任何有效的整数值，例如 1 、2 等
<angle> ：任何有效的角度值，例如 360deg 、400grad 、1rad 和 1turn 等
<time> ：任何有效的时间值，例如 .2s 、200ms 等
<resolution> ：任何有效的分辨率值，例如 dpi、dpcm 和 dppx等
<transform-list> ：任何有效的变换函数，例如 rotate() 、translate() 等
<custom-ident> ：任何有效的 ident 值，例如 easing 、linear 等

syntax 中的 +、#、| 符号

+ ：接受以空格分隔的列表，例如 <length>+ ，表示接受以空格分隔的长度值（<length>）列表
# ：接受以逗号分隔的列表，例如 <color># ，表示接受以逗号分隔的颜色值（<color>）列表
| ：接受以竖线分隔的列表，例如 <length> | <lenthg>+ ，表示接受单个长度值（<length>）或者以空格分隔的长度值列表

syntax: "<color>";                 /* 接收一个颜色值 */
syntax: "<length> | <percentage>"; /* 接收长度或百分比参数，但是二者之间不进行计算合并 */
syntax: "small | medium | large";  /* 接收这些参数值之一作为自定义标识符 */
syntax: "*";                       /* 任何有效字符 */

变量过渡

transition 属性可以接受 @property 定义的变量，实现过渡的动画效果

@keyframe 变量动画

如果不使用 @property 定义的变量，直接在 @keyframes 中改变，效果会是一跳一跳的，而不是有丝滑的动画效果

渐变色过渡

使用 @property 可以实现渐变色的过渡效果