brightness()超100%发灰是sRGB截断导致过曝，安全范围0.7~1.3；contrast()发虚因放大抗锯齿噪点，需配合字体平滑或GPU加速；Safari需will-change声明且整体赋值filter；精确调色须用color-mix或HSL计算。
filter: brightness() 调亮度时值超过100%反而发灰？
不是bug，是sRGB色彩空间叠加导致的过曝失真。brightness(1.5) 不是“加50%亮度”，而是对每个通道线性缩放，R/G/B > 255 的部分直接被截断为255，细节就糊了。
- 安全范围：brightness(0.7) ~ brightness(1.3)，再高容易丢失暗部/亮部层次
- 想提亮又保细节？改用
filter: contrast(1.2) brightness(1.1)组合，先拉对比再微调亮度 - 别对带透明度的元素（如
rgba(0,0,0,0.5)）单独用 brightness()，alpha 会被一并放大，可能意外变不透明
filter: contrast() 调对比度后文字边缘发虚？
contrast() 本质是拉伸色阶，会放大抗锯齿边缘的半透明像素噪点，尤其在小字号或非整数缩放下明显。
- 优先用
font-smoothing: antialiased或-webkit-font-smoothing: subpixel-antialiased配合调节 - 对比度别设太高——
contrast(2)比contrast(1.8)更容易让灰色文字出现“毛边” - 如果必须高对比，把文字包进
<div> 并加 <code>backface-visibility: hidden，触发GPU渲染减少插值模糊filter 颜色调节在 Safari 上失效或闪烁？
Safari 对 filter 的硬件加速策略更激进，尤其配合 transform 或 opacity 动画时，容易触发渲染管线重置。
- 加
will-change: filter提前声明，但仅用于动画中频繁变化的元素，否则白耗内存 - 避免和
transform: scale(1.001)这类“伪触发”一起用——Safari 会反复重建图层 - 动态改 filter 值时，用
element.style.filter = 'brightness(1.2) contrast(1.1)'整体赋值，别只改其中一项（比如只改 brightness），否则 Safari 可能丢掉之前设置的 contrast
想精确控制某个颜色变亮而不影响其他元素？
filter 是作用于整个元素及其子树的，没法只调背景色或某段文字。真要隔离，得换思路。
立即学习“前端免费学习笔记（深入）”；
- 背景色变亮：用
background-color: color-mix(in srgb, #3498db 70%, white 30%)（Chrome 111+ / Safari 16.4+ 支持） - 文字颜色动态提亮：CSS 自定义属性 +
color: hsl(from var(--base-hsl), 70%, calc(60% + 10% * var(--lift, 0))) - 老浏览器兜底：预设几档 class，比如
.text-bright-1~.text-bright-3，JS 切换 class 而非内联 filter
filter 的亮度/对比度调节看着简单，实际是拿渲染精度换开发速度。越想精细控制，越得提前想好 fallback 和边界条件——比如用户开了系统深色模式，你的 brightness(1.3) 可能直接把黑底文字干成不可读的灰蒙蒙。
- 加
