直接用 calc() 减 lightness 无效，因 hsl() 不支持 calc() 参数；须用 CSS 变量（如 --l）存储 lightness 值，在 hover 中用 calc() 修改变量，并在 hsl() 中通过 var(--l) 引用。
为什么直接用 calc() 减 lightness 常常没反应
因为 CSS 的 hsl() 函数不支持在函数体内直接写 calc() 表达式——比如 hsl(200, 100%, calc(60% - 10%)) 是**无效语法**，浏览器会静默忽略整个声明。这不是浏览器 bug，而是 CSS 颜色函数规范明确限制：参数必须是字面量数值或变量（CSS 自定义属性），不能是动态计算表达式。
真正能生效的方式是把 lightness 值抽成 CSS 变量，再在 hsl() 中引用它，并用 calc() 修改该变量值：
button {
--l: 60%;
background-color: hsl(200, 100%, var(--l));
}
<p>button:hover {
--l: calc(60% - 10%);
}</p>
用 CSS 变量 + hsl() 实现平滑悬停加深
这是目前最可靠、可读性高且兼容性好的方案（Chrome 49+/Firefox 59+/Safari 15.4+ 支持）。关键在于变量必须定义在伪类作用域内可被重写，且 hsl() 要写在使用变量的位置（不能提前“固化”）。
-
--l必须是自定义属性（var(--l)），不能是普通属性名 - 悬停时只需改变量值，无需重复写整个
hsl()，避免冗余 - 若需不同按钮用不同基础亮度，可为每个按钮设独立变量：
style="--l: 70%" - 动画过渡要加在
background-color上，不是变量上：transition: background-color 0.2s
替代方案：预定义 HSL 值 vs filter: brightness()
有人用 filter: brightness(0.9) 模拟加深，但这是全局亮度调整，会同时压暗文字和边框，且对半透明背景有副作用；而 HSL 的 lightness 调整只影响色相明暗，更精准。
也有人提前写好两套 HSL 值（如 hsl(200, 100%, 60%) 和 hsl(200, 100%, 50%)），省去计算。这在颜色固定时更轻量，但失去灵活性——比如主题色从 CSS 变量注入时，就无法靠纯 CSS 计算出对应加深值，必须 JS 辅助或预生成。
容易被忽略的饱和度与色相联动问题
单纯降低 lightness 在深色区域（如 lightness ）可能让颜色发灰甚至不可见；某些高饱和度色相（如 <code>hsl(0, 100%, 10%)）降到 5% 后视觉差异极小。实际使用时建议：
- 基础
lightness控制在 40%–80% 区间，留出安全调整空间 - 加深幅度别超过 15%，否则易跳变；搭配
transition缓动更自然 - 用 DevTools 实时拖动
--l变量观察效果，比凭空估算靠谱得多
变量名、calc 精度、过渡属性这些细节，错一个就看不到加深效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
