CSS @property 自定义属性怎么让渐变可插值：语法注册、继承与降级验收

写悬停效果的渐变按钮时，不少人都碰到过这种情况：背景色根本不是顺滑过渡，卡到动画中途直接跳成目标颜色。颜色写在 --accent 里看起来完全没毛病，但浏览器默认会把普通双横线开头的自定义属性当成无类型的值处理，根本不知道要怎么在两个颜色之间做插值运算。

用@property 注册自定义属性声明类型，就能让原本不能平滑过渡的 CSS 渐变、颜色属性拿到合法插值能力，配合继承规则和初始值配置，再做好旧浏览器降级，就能拿到流畅的颜色过渡效果。

接下来我们动手做一个主题按钮：默认显示蓝色，悬停后过渡成紫色，按钮旁的功能徽标复用同一个颜色变量。先按普通 CSS 写法实现，再叠加上注册规则，就能直观看到两者的表现差异。

普通自定义属性为什么会把颜色过渡成跳变

最开始写的按钮代码差不多是这样：

.demo-button {
  --accent: #2374e1;
  color: white;
  background: var(--accent);
  transition: --accent 260ms ease;
}

.demo-button:hover {
  --accent: #7c3aed;
}

这里的 --accent 确实能被 background 正常读取使用，但它完全没有向浏览器声明自己是颜色类型。浏览器切换到 #2374e1 和 #7c3aed 两个值的过渡场景时，找不到可用于计算的已注册类型，过渡效果就会直接变成离散切换。这个问题既不是 transition 的动画时长写错，也不是 var() 的过渡属性配置失效。

先注册一个可插值的颜色属性

@property 可以直接写在常规样式表里，不需要提前运行任何 JavaScript 代码。最简的注册声明只需要三个关键描述符：

@property --accent {
  syntax: "";
  inherits: false;
  initial-value: #2374e1;
}

.demo-button {
  --accent: #2374e1;
  color: white;
  background: var(--accent);
  transition: --accent 260ms ease;
}

.demo-button:hover,
.demo-button:focus-visible {
  --accent: #7c3aed;
}

syntax: "" 是类型约束，也是后续插值计算能正常成立的核心基础；inherits: false 表示当前属性不会让按钮内部的子元素自动继承父级的颜色值；initial-value 则保证这个注册属性在没拿到有效值的时候，也有一个确定的初始颜色兜底。

如果你的组件场景确实需要子元素自动继承主题色，可以把 inherits 改成 true。别把这个配置当成性能开关，它最核心的作用是定义组件语义：这个颜色值要不要沿着 DOM 树向下层节点传播。

用一个小组件把继承边界跑通

为了直观看到 inherits 的实际作用，我们给按钮加一个状态圆点徽标。下面的写法让徽标主动读取绑定在按钮上的颜色变量：

  
  保存主题

.demo-button__dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--accent);
}

.demo-button--warm {
  --accent: #d97706;
}

如果注册规则用的是 inherits: false，子元素不会自动凭空拿到父按钮上的注册属性值；但它仍然可以通过 var(--accent) 读取到级联后的结果，前提是当前元素或者更近的样式规则已经给这个变量赋过值。实际生产写组件的时候，一般都会在组件根节点上主动设置主题变量，不会完全依赖“刚好能继承到”的隐式关系。

这一步完全可以在浏览器开发者工具的 Computed 面板里做校验：先确认按钮和状态圆点最终取到的是同一个颜色，再切换 inherits 的配置或者删掉按钮上的自定义赋值，看子节点是不是能正确回落回 initial-value。

无效赋值和旧浏览器回退怎么验收

完成属性注册之后，浏览器会严格按照声明的类型来解析这个变量。下面给属性赋的这个值根本不是合法颜色：

.demo-button {
  --accent: 12px;
}

它没办法作为有效的 来使用。为了避免页面在不支持注册规则、或者不接受该异常值的环境里出现透明按钮这种异常，保留一个普通的静态背景回退方案会稳妥很多：

.demo-button {
  background: #2374e1;
  background: var(--accent, #2374e1);
}

@supports (background: color-mix(in srgb, red, white)) {
  @property --accent {
    syntax: "";
    inherits: false;
    initial-value: #2374e1;
  }
}

做回退的核心目标是保证“页面功能仍然可用”，不需要强求让低版本环境也模拟出完全一样的动画效果。落地到实际项目里，可以结合你适配的浏览器矩阵做分层测试：支持注册属性的环境检查颜色是不是平滑过渡，不支持的环境就检查静态颜色展示、文字对比度和按钮点击响应是不是正常。

把动效、焦点和减少动态效果放在同一张验收表里

@media (prefers-reduced-motion: reduce) {
  .demo-button {
    transition-duration: 1ms;
  }
}

颜色过渡本身不是唯一的无障碍检查项。焦点样式不能只靠颜色差异做区分，按钮文字和背景的对比度也要保证符合可读性要求。浏览器兼容性校验最好把“支持注册属性”和“仅支持普通 CSS 变量”两类表现分别记录，不要把单一环境的表现默认等同于所有用户的实际使用体验。

常见问题

@property 和 CSS.registerProperty() 有什么区别？

@property 是写在样式表里的声明方式，CSS.registerProperty() 是 JavaScript 提供的 API。两者都可以完成类型、继承规则和初始值的注册，纯 CSS 实现的组件场景优先用 @property。

注册了颜色属性就一定能平滑动画吗？

不一定。还要确认目标浏览器支持该能力、过渡属性配置正确，并且动画起止值都能按照声明的 syntax 正常解析。动效方案仍然要准备好静态回退逻辑。

inherits 应该写 true 还是 false？

完全看组件本身的语义。全局主题令牌需要向所有后代节点传播的时候可以配置成 true；组件内部的局部状态属性一般写 false，再到需要用到这个值的子元素上主动显式赋值，边界会更清晰可控。

initial-value 可以省略吗？

只有使用通用语法声明的时候才有可能省略；像 这类指定了具体类型的注册规则，通常都需要给出一个合法的初始值，否则整条注册规则都会被浏览器直接忽略。

@property 的价值根本不是给所有 CSS 变量都套一层声明，而是把真正需要明确类型、继承边界和插值行为的变量摘出来做定向注册。针对颜色渐变场景，先写好静态背景回退，再完成 的注册，最后用悬停交互、键盘焦点、无效值赋值、减少动态效果四组场景做校验，这个动效组件才算完整落地。