如何在保留box-shadow阴影前提下让外层背景显示为#f5f8f8

原理 #

半透明颜色叠加遵循标准Alpha混合规则，计算公式为：
最终色单通道值 = 上层色单通道值 × 透明度 + 下层色单通道值 × (1 - 透明度)
所有RGB通道取值范围为0-255，透明度取值范围为0-1。

你的场景中，上层是.inner的外阴影rgb(155 155 155 / 30%)，下层是.outter的背景色，要求叠加后的最终色为#f5f8f8（对应RGB值为245、248、248）。代入现有阴影参数计算可得，下层背景色需要的RGB值超出了0-255的有效范围，说明保留当前阴影参数的前提下，仅调整外层背景色无法实现目标效果，需要调整阴影参数，或采用以下方案：

方案1：保留外层背景为#f5f8f8，调整阴影参数 #

如果不需要修改外层背景，可调整阴影的色值/透明度，实现叠加后达到目标色：

可直接使用的代码示例（保留30%阴影透明度） #

.outter {
  background: #f5f8f8;
}

.inner {
  /* 阴影色调整为纯白色，30%透明度，叠加后最终色和外层背景一致 */
  box-shadow: 0 0 0 99999px rgb(255 255 255 / 30%);
}

如果需要保留阴影的灰色调，可降低阴影透明度：

.inner {
  box-shadow: 0 0 0 99999px rgb(155 155 155 / 5%);
}

方案2：保留原始阴影参数，调整外层背景色 #

如果必须保留rgb(155 155 155 / 30%)的阴影不变，可将外层背景色设为纯白色，叠加后效果最接近目标色：

.outter {
  background: #ffffff;
}

.inner {
  box-shadow: 0 0 0 99999px rgb(155 155 155 / 30%);
}

叠加后最终色为#f0f0f0，如果需要完全匹配#f5f8f8，可以略微降低阴影的灰度值。

快速调试方法（无需手动计算） #

打开浏览器开发者工具，直接在元素样式面板微调外层背景色/阴影参数，用开发者工具自带的取色器吸取外层区域的颜色，直到取色结果为#f5f8f8即可，适合不需要精准计算的场景。

内容的提问来源于stack exchange，提问作者lilo