css3 @property

语法

@property --propery-name {
  syntax: '';
  inherits: false;
  initial-value: #c0ffee;
}

• syntax：语法
• @property --my-color：声明一个自定义属性 --mycolor
• inherits：是否允许继承
• initial-value：初始值

@property 规则中 syntax 和 inherits 描述符是必需的; 如果其中任何一项缺失, 整条规则都将失效并且会被忽略。 initial-value 描述符仅在syntax描述符为通用syntax定义时是可选的，否则initial-value也是必需的——如果此时该描述符缺失,整条规则都将失效且被忽略。

"":长度

Any valid  value

"":数字

 values

"":百分比

Any valid  value

"":长度百分比

Any valid  or  value, any valid  expression combining  and  components.

"":颜色

Any valid  value

"":图像

Any valid  value

"":链接

Any valid  value

"":整数

Any valid  value

"":角的大小

Any valid  value

"":时间

Any valid  value

"":单位

Any valid  value

"":变化方法(常用于2D)

Any valid  value

"":自定义字符串标识符

Any valid  value

作用 

当我们想要背景从白色到红色的渐变,一般来说我们会先这么写,但是没有生效

.el {
  background: linear-gradient(white, black);
  /* this transition won't work */
  transition: 1s;
}
.el:hover {
  background: linear-gradient(red, black);
}

所以我们用新的渐变颜色在伪元素中褪色，或者用比元素渐变更宽的背景位置来伪造它。

但是现在我们可以这样做了：

@property --gradient-start {
  syntax: "";
  initial-value: white;
  inherits: false;
}
.el {
  --gradient-start: white;
  background: linear-gradient(var(--gradient-start), black);
  transition: --gradient-start 1s;
}
.el:hover {
  --gradient-start: red;
}

因为我们告诉 CSS 这个自定义属性是一个   ，所以它可以被处理或者动画化。之前的颜色值是无法被动画化的

详细可以学习CSS Properties and Values API Level 1https://drafts.css-houdini.org/css-properties-values-api-1/

@property - CSS（层叠样式表） | MDNhttps://developer.mozilla.org/zh-CN/docs/Web/CSS/@property