用 filter: brightness() 加深按钮颜色不可靠，易过暗或失真；推荐优先使用 hsl() 调整明度（l 值）或现代 color-mix() 混合黑色，兼顾语义性与兼容性。
button:hover 用 filter: brightness() 加深颜色行不行
行，但容易过暗或失真——brightness() 是线性缩放整个 RGB 值，对浅色按钮（比如 #f0f0f0）加 brightness(0.8) 可能直接变灰黑，而深色按钮（如 #333）反而看不出变化。
实操建议：
- 优先用
color和background-color的明度微调，更可控 - 若必须用
filter，搭配contrast()或saturate()补偿失真，例如：filter: brightness(0.92) contrast(1.05) - 避免在带边框的按钮上单独对背景用
brightness()，因为边框颜色不变，视觉割裂
用 hsl() 动态加深比 rgb() 更靠谱
hsl() 的 l（lightness）参数直接对应明度，调低它就能自然“加深”，且不破坏色相和饱和度。而 rgb() 没有语义化明度通道，硬减数值会偏色（比如 rgb(200, 100, 50) 减 20% 变成 rgb(160, 80, 40)，橙红倾向可能变闷）。
常见错误现象：用 JS 动态改 style.backgroundColor 时解析 rgb() 字符串再计算，结果精度丢失、透明度丢失、不支持 CSS 变量。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 写死样式时，直接写
hsl(20, 80%, 60%)和hsl(20, 80%, 48%)（降 12% 明度） - 需要运行时计算？用 CSS 自定义属性 +
calc()：:root { --btn-l: 60%; }<br>button { background: hsl(20, 80%, var(--btn-l)); }<br>button:hover { --btn-l: 48%; } - 注意：Safari 15.4+ 才支持在
hsl()中用var()，旧版需降级为 JS 注入或预编译
IE 不支持 filter 和 hsl() 时怎么保底
IE11 及更早版本不认 filter（除了旧版 -ms-filter，但只支持模糊/透明/灰度），也不支持 hsl() 中的百分比写法（要写 hsl(20, 80, 60)，无 % 符号）——但更麻烦的是，它压根不支持 :hover 在非 a 元素上触发（除非元素有 tabindex）。
实操建议：
- 给按钮加
tabindex="0"，让 IE 触发:hover - 用
rgba()代替hsl()做兼容：主色用rgba(51, 51, 51, 1)，悬停用rgba(34, 34, 34, 1)（手动选相近深色） - 完全放弃
filter，IE 下只做background-color和border-color微调，别强求“动态计算”
用 CSS color-mix() 实现真正动态加深（现代方案）
color-mix() 是 CSS Color Level 4 新特性，可混合当前色与黑/白，实现语义化明度调整，比如 color-mix(in srgb, currentColor 85%, black 15%) 就是“主色占 85%，加 15% 黑”，效果比 brightness() 更自然。
目前仅 Chrome 111+、Safari 16.4+、Firefox 119+ 支持，且需开启实验性功能（Firefox 默认关闭）。
实操建议：
- 作为渐进增强：先写传统
background-color，再叠一层background-color: color-mix(in srgb, var(--btn-bg) 90%, black 10%) - 不要用
color-mix()处理文字颜色（color），部分浏览器对文本渲染有闪烁或重绘延迟 - 混合空间选
in srgb最稳妥；in lch理论上更均匀，但兼容性差，且 LCH 黑色是lch(0% 0 0)，不是black关键字
真正难的不是算深多少，而是深得“像它自己”——同一套逻辑处理 #fff 和 #000 时，前者该变灰，后者该几乎不变。多数人卡在没区分输入色域就硬套公式。
