css中不存在transition-color属性，需用transition配合color等可动画颜色属性实现渐变；transition必须写在初始状态规则中，推荐指定属性而非all，并注意颜色格式统一及hsl()更平滑。
transition-color 不存在，别被名字骗了
CSS 没有 transition-color 这个属性。这是初学者常搜错的关键词——浏览器会直接忽略它，文字或背景颜色根本不会动。真正起作用的是 transition 配合可动画的颜色属性，比如 color、background-color、border-color 等。
必须显式声明 transition 才能触发渐变
即使写了 color: red → color: blue，没有 transition 声明，变化仍是瞬时跳变。关键点：
-
transition要写在「初始状态」的规则里（比如默认的:hover前的状态），不能只写在:hover中 - 推荐写全三项：
transition: color 0.3s ease, background-color 0.3s ease，避免漏掉某一项 - 用
ease最稳妥；linear显得生硬，ease-in-out适合强调进出感 - 不要用
transition: all 0.3s—— 它会把所有可动画属性都加上过渡，可能意外拖慢滚动或引发重排
background-color 渐变需注意透明度和色空间
从 #fff 切到 rgba(0, 0, 0, 0.1) 看似简单，但浏览器实际插值的是 RGBA 数值，不是人眼感知的明暗。结果可能是中间一段发灰、不自然。
- 确保起止色使用同一种格式：都用十六进制、或都用
rgb()、或都用hsl()，避免格式混用导致插值异常 - 想更平滑？改用
hsl()：色相（hue）连续变化比 RGB 更符合视觉逻辑，比如hsl(0, 100%, 50%)→hsl(120, 100%, 50%) - 背景图叠加渐变时，
background-color的过渡仍有效，但别指望它带动background-image: linear-gradient()动起来——渐变背景本身不可过渡，得靠其他技巧（如两层叠盖 + opacity）
:hover 触发不够？试试 JavaScript 控制 class 切换
纯 CSS 的 :hover 在触屏设备上不可靠，且无法响应数据变化或定时逻辑。这时该让 JS 上场：
立即学习“前端免费学习笔记（深入）”；
- 给元素加一个类名（比如
is-active），CSS 里写.btn { transition: background-color 0.25s; } .btn.is-active { background-color: #007bff; } - 用
element.classList.toggle('is-active')或.add()/.remove()控制状态 - 避免直接操作
style.color—— 这会覆盖 CSS 中的transition声明，导致失效 - 需要精确控制时机？监听
transitionend事件，但注意它对每个过渡属性都会触发一次
transition 却以为写了，或者写了却写在了错误的选择器里。 
