css 中没有 lightness() 函数，所谓“lightness”实为 hsl 模型的亮度参数 l；调整亮度应使用 hsl() 手动修改 l 值、color-mix() 混合白/黑色，或谨慎使用 filter: brightness()。
lightness 不是 CSS 原生函数，别被名字骗了
CSS 里没有 lightness() 这个函数。你搜到的“lightness 函数”大概率是混淆了 HSL 颜色模型中的 lightness 参数（即 HSL 的第三个值），或是误把 Sass/Less 等预处理器的函数当成了原生 CSS 功能。纯 CSS 中调整颜色亮度，得靠 hsl()、color-mix()（新标准）、或 filter: brightness() —— 但后两者行为完全不同，不能混用。
用 hsl() 手动调 lightness 参数最可控
HSL 模型中，hsl(h, s, l) 的第三个参数 l 就是亮度（0% = 黑，100% = 白，50% = 原色亮度）。只要你知道目标颜色的 HSL 值，就能直接增减 l 值来变亮或变暗。
常见做法：
- 用浏览器开发者工具取色 → 右键颜色值 → “Copy as HSL”
- 把
rgb(100, 150, 200)转成hsl(210, 50%, 59%)，想提亮就改成hsl(210, 50%, 75%) - 注意：单纯改
l不改变色相和饱和度，但极端值（如l: 0%或l: 100%）会丢失原色特征 - 不支持在
hsl()里写表达式（如hsl(210, 50%, calc(59% + 10%))），CSS 不解析 calc 对颜色函数参数的运算
color-mix() 是真正可计算的亮度调节方式（但需现代浏览器
color-mix() 是 CSS Color Level 4 新增函数，能按比例混合两种颜色，常用来“向白色/黑色混合”实现提亮/压暗，效果比 filter: brightness() 更自然（不溢出、不破坏透明度）。
示例：
background-color: color-mix(in srgb, #6496c8 80%, white 20%); /* 提亮 */<br>border-color: color-mix(in srgb, #6496c8 70%, black 30%); /* 加暗 */
关键点：
- 必须指定色彩空间，
in srgb最稳妥；in hsl也能用，但插值逻辑不同，不一定符合直觉 - Chrome 111+、Safari 16.4+、Firefox 119+ 支持；旧版浏览器会忽略整条声明，记得加降级（如先写
rgb()） - 它不是“调整亮度”，而是“混合”，所以结果受基色本身影响大——深蓝混白后偏灰蓝，而浅黄混白可能直接发白
filter: brightness() 看似简单，但副作用明显
这个滤镜作用于渲染后的整个元素（包括子元素、透明区域、阴影），不是颜色本身，所以常被误用。
典型问题：
- 对半透明白色背景叠加
brightness(1.3)，可能让文字边缘泛灰、对比度下降 - 配合
opacity使用时，filter会进一步降低视觉对比，可读性骤降 - 无法单独控制边框或文字颜色亮度，只能整块处理
- 值为无单位数字：
brightness(1)= 原样，brightness(0.8)= 变暗，brightness(1.5)= 变亮（但可能过曝）
它适合快速原型调试，不适合精确控色场景。
真正需要动态调亮度时，优先走 hsl() 手动换算或 color-mix() 混合；如果只是 UI 上临时“让按钮看起来更亮一点”，filter 最快，但得盯着实际渲染效果看——尤其在深色模式下，它的表现经常和预期相反。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
