1. CSS按钮颜色与阴影不同步的问题
现象与影响
在按钮的交互设计中，颜色变化与阴影变化的时间不同步会直接影响可用性。当悬停时颜色快速切换而阴影延后，或阴影先变再改变颜色，都会让用户产生错觉，感知反馈不连续。
这种不同步的视觉错觉会降低交互的一致性，使得点击和激活状态的反馈显得不够明确，用户需要额外的认知努力来理解按钮的当前状态。
成因分析
常见原因包括未对颜色、背景色和阴影（box-shadow）等属性统一设置过渡时长，或者只为部分属性指定transition，导致时间不一致。
此外，浏览器对于阴影与颜色的渲染顺序可能存在细微差异，进一步放大了不同步的现象。核心要点是明确过渡的属性集合并统一时间，从而实现视觉上的同步。
2. 使用transition-duration实现统一过渡时间的实用做法
核心思路
通过在按钮样式中设定一个统一的transition-duration，并指定需要过渡的属性集合，颜色变化和阴影变化可以在同一时间内完成，达到视觉同步。
将相关属性放在同一个过渡时长下，是实现一致性的重要步骤，同时也有助于提升可访问性和交互的可预测性。
实现要点
要点在于使用transition-property列出需要过渡的属性（如color、background-color、box-shadow），再用transition-duration设置统一的时长。
为便于维护，可以把时长写成CSS变量，便于全局统一调整，变量化管理降低修改成本。
代码示例
:root {--btn-duration: 200ms; /* 统一过渡时间 */
}
.btn {color: #fff;background-color: #4CAF50;box-shadow: 0 4px 12px rgba(0,0,0,.25);transition-property: color, background-color, box-shadow;transition-duration: var(--btn-duration);transition-timing-function: ease;
}
.btn:hover {background-color: #45a049;color: #fff;box-shadow: 0 8px 16px rgba(0,0,0,.35);
}
