rgba叠加本质是alpha混合而非颜色相加，计算公式为result = foreground × alpha + background × (1 − alpha)，各通道独立运算，导致叠加后色值非线性变化且受中间色影响。
rgba()叠加不是颜色相加，而是Alpha混合计算
RGBA叠加后出现色差，根本原因在于浏览器没在“叠颜色”，而是在执行像素级的Alpha混合公式：result = foreground × alpha + background × (1 − alpha)。这个公式对每个R/G/B通道独立运算，结果取决于参与混合的每一层实际alpha值和背景色——不是你写的两个rgba(0,0,0,0.3)简单相加得0.6，而是1 − (1−0.3)² = 0.51，且第二层混合对象已是第一层合成后的中间色，不是原始底色。
父容器透明导致子元素颜色被“二次混合”
常见错误是给父容器设background-color: rgba(0,0,0,0.2)，子元素又设background-color: rgba(255,255,255,0.1)。此时子元素背景会先和父背景混合，再和父容器外的默认白色画布混合（因父容器本身不opaque），最终色值严重偏离预期。DevTools拾色器点出来的颜色，已经是多次混合后的结果，不能直接抄进代码。
- 子元素若需完全遮挡父背景，必须用
background-color: #fff或rgba(255,255,255,1)，alpha=1是硬性要求 - 避免在父容器上用
opacity，它会让整个子树参与混合，文字、边框全变灰 - 用
isolation: isolate可强制创建新层叠上下文，阻断混合链，但仅当真需要复杂滤镜时才用
过渡动画中混用色彩模型会中断插值
写transition: color 0.3s却从#ff6b6b跳到hsl(0, 60%, 60%)，浏览器无法对齐通道，直接跳变——这不是色差，是压根没插值。色差出现在更隐蔽的场景：比如用rgba(255,107,107,0.9)过渡到rgba(255,107,107,1)，看似只变alpha，但若起始色实际是设计稿里color(srgb 1 0.4196 0.4196)，而浏览器按Display P3解释，起点就偏粉，终点又按sRGB渲染，中间过程就会漂移。
- 统一用
rgb()或rgba()写法，禁用hsl()或hex混搭 - 关键色必须显式声明色彩空间：
color: #ff6b6b; color: color(srgb 1 0.4196 0.4196); - 深色模式下别复用同一组
rgba()值，@media (prefers-color-scheme: dark)里重写
高分屏下alpha触发子像素渲染退化
只要color或background-color用了alpha rgba(0,0,0,0.99)），浏览器就会关闭subpixel抗锯齿，切到grayscale模式——结果不是模糊，是模糊+彩边，尤其在MacBook Pro这类P3屏上更刺眼。这种“色差”其实是渲染路径切换带来的视觉失真，和色彩空间无关，但会放大所有其他色差。
- 文本颜色优先用
#000、rgb(0,0,0)等无alpha写法 - 需要半透效果时，改用
backdrop-filter: blur(4px)配纯色背景，绕过alpha通道 - CSS变量动态改色时，确保初始值和目标值都为alpha=1，避免中间帧走错渲染管线
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
