怎样在CSS中用color-mix()实现按钮悬停时的平滑变暗？-css教程-PHP中文网

color-mix() 不能直接动画，需通过 transition background-color 实现悬停变暗：初始态设为 css 变量色，hover 态用 color-mix() 计算新色值，并配合 @supports 降级至 hsl()。

怎样在css中用color-mix()实现按钮悬停时的平滑变暗？

color-mix() 在按钮悬停中不直接支持动画

color-mix() 是一个 CSS 函数，用于在声明时静态混合两种颜色（比如 color-mix(in srgb, #007bff 70%, black)），但它**不是可动画属性**，也不能用在 :hover 的过渡链里。你不能写 transition: color-mix() 0.3s —— 浏览器会忽略它，因为 color-mix() 不是独立的 CSS 属性，只是函数值，只能出现在 color、background-color 等支持颜色值的地方。

所以想“用 color-mix() 实现悬停变暗”，实际做法是：在 :hover 里重新计算一次混合色，并让浏览器对 background-color 做过渡 —— 关键是确保起始色和结束色都是明确的、可插值的颜色值。

正确写法：在 :root 或变量中预定义 base 颜色，hover 时用 color-mix() 计算暗色

把主色抽成 CSS 自定义属性，再用 color-mix() 在 :hover 中生成对应暗色，同时保证两个状态的 background-color 都是具体颜色值（非函数），这样 transition 才生效。

示例：

button {
  --btn-base: #007bff;
  background-color: var(--btn-base);
  color: white;
  transition: background-color 0.25s ease;
}
<p>button:hover {
background-color: color-mix(in srgb, var(--btn-base) 85%, black);
}</p>

注意点：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

color-mix() 必须写在支持它的浏览器中（Chrome 111+、Safari 16.4+、Firefox 119+），旧版会回退到未 hover 状态（需加降级）
in srgb 是推荐的色彩空间，避免在 lch 或 oklch 下因亮度非线性导致“看起来没变暗”
混合比例建议从 80%–90% 开始调，var(--btn-base) 85%, black 表示 85% 主色 + 15% 黑，比直接 darken() 更可控

兼容性兜底：用 @supports 包裹，fallback 到 hsl() 调整

如果目标用户包含较老浏览器，别只靠 color-mix()。用 @supports 检测并提供降级方案：

button {
  --btn-base: #007bff;
  background-color: var(--btn-base);
  transition: background-color 0.25s ease;
}
<p>@supports (background-color: color-mix(in srgb, red, blue)) {
button:hover {
background-color: color-mix(in srgb, var(--btn-base) 85%, black);
}
}</p><p>/<em> fallback：用 hsl() 降低亮度 </em>/
button:hover {
background-color: hsl(204, 100%, 45%); /<em> 手动对应 #007bff 的暗色 </em>/
}</p>

这里的关键是：fallback 的 hsl() 值必须和 color-mix() 输出结果视觉接近，否则会在支持新特性的浏览器里闪一下。可以用 DevTools 的颜色拾取器验证输出色值。