0Pricing
CSS Academy · 课时

CSS 属性和值 API（@property）

使用 @property 注册带有类型和继承行为的自定义属性，以创建可动画的 CSS 变量。

CSS 属性和值 API（@property） 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是 @property

@property 是 CSS 用于注册自定义属性的方式，可以为属性指定类型、继承行为和初始值。它是 CSS 属性和值接口（CSS.registerProperty）的声明式形式。

@property 语法

请使用三个必需的描述符注册自定义属性：

<div class="box"></div>

语法描述符

syntax 描述符使用 CSS 类型名称定义属性的类型：

  • "<number>"、"<integer>"、"<percentage>"
  • "<angle>"、"<color>"、"<length>"
  • "<image>"、"<transform-list>"
  • "*"——接受任意值（类似未注册属性）

继承描述符

控制属性是否通过 DOM 继承。对于应当在每个元素中独立存在的属性，请设置为 false。

初始值描述符

当属性未设置时提供一个有保证的初始值。这样可以使属性支持动画。

为自定义属性制作动画

@property 的主要优势在于：注册后的自定义属性可以进行过渡和动画，因为浏览器知道它们的类型，并且可以在不同值之间进行插值：

<div class="element is-hovered"></div>

不使用 @property 时

如果不进行注册，CSS 不知道自定义属性的类型。两个变量值之间的过渡会直接跳变，而不会进行插值——浏览器无法计算未知类型的中间值。

使用 @property 制作渐变动画

为渐变色标制作动画（过去不使用 @property 就无法实现）：

<div class="loader loading"></div>

JavaScript 等效方式

您也可以使用 JavaScript 接口注册属性：

<div id="box"></div>
<script>
  // JavaScript equivalent of @property
  CSS.registerProperty({
    name: '--rotation',
    syntax: '<angle>',
    inherits: false,
    initialValue: '0deg'
  });

  document.getElementById('box').style.setProperty('--rotation', '45deg');
</script>

浏览器支持情况

@property 受到 Chrome 85 及更高版本、Edge 85 及更高版本、Safari 16.4 及更高版本、Firefox 128 及更高版本的支持。在现代浏览器中已得到广泛支持。

@property 的实际用途

常见用例：

  • 为渐变位置和颜色制作动画
  • 为 HSL 颜色中的色相/饱和度制作动画
  • 为进度条填充效果制作动画
  • 为数字显示效果制作计数动画
  • 通过颜色令牌动画实现平滑的深色/浅色模式过渡

快速检查

为什么为 CSS 自定义属性制作动画需要使用 @property？

回顾

@property 使用 syntax 类型、inherits 标志和 initial-value 注册自定义属性。注册后的属性支持动画和过渡，因为浏览器可以对其类型化值进行插值。这样便可以实现未注册自定义属性无法实现的渐变动画、色相过渡和计数动画。

常见问题解答

「CSS 属性和值 API（@property）」课时是免费的吗？

是的 — 「CSS 属性和值 API（@property）」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「CSS 属性和值 API（@property）」这节课中我会学到什么？

使用 @property 注册带有类型和继承行为的自定义属性，以创建可动画的 CSS 变量。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。

「CSS 属性和值 API（@property）」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. CSS 类型对象模型（OM）
  2. CSS 属性和值 API（@property）
  3. CSS 绘制 API：Worklet
  4. CSS 布局 API 与作用域
← 返回 CSS Academy