重复box-shadow的等效替代方案及叠加原理与计算方法

一、重复box-shadow的叠加方式 #

当你给元素添加多个完全重合的box-shadow（比如示例里的四个0 0 1rem #0dc0f7），它们的渲染逻辑很直接：

• 每个阴影都是独立绘制的，虽然堆叠顺序是第一个在最上层、最后一个在最下层，但因为所有阴影的位置、大小、颜色完全一致，它们的模糊区域会相互叠加。
• 如果是无透明度的实色阴影，叠加后视觉上阴影会更厚重——单个阴影的模糊边缘是从透明到实色的渐变，多个叠加后，渐变区域的颜色密度更高，阴影看起来更“实”，范围也会比单个阴影大一点。
• 如果是带透明度的阴影（比如rgba格式），叠加时透明度会累积，比如四个rgba(13, 192, 247, 0.25)的阴影叠在一起，最终的透明度差不多是1 - (1-0.25)^4 ≈ 0.68，视觉上就是更不透明的阴影。

二、如何计算等效的单个box-shadow #

要把多个重复阴影转换成单个阴影，核心是匹配视觉上的阴影范围和厚重感，没有绝对精准的公式，但可以按这个思路推导：

1. 先明确阴影参数的含义 #

box-shadow的完整语法是：box-shadow: <x偏移> <y偏移> <模糊半径> [扩展半径] <颜色>

• 模糊半径（blur）：值越大，阴影边缘越模糊，扩散范围越广。
• 扩展半径（spread）：正值会让阴影整体向外扩大，负值则向内收缩。

2. 针对同色重合阴影的近似计算 #

拿示例里的四个0 0 1rem #0dc0f7来说：

• 多个阴影叠加后，原本单个阴影的模糊渐变区被“填充”得更实，这时候可以用更小的模糊半径来减少边缘的模糊感，同时用正的扩展半径来补偿阴影的整体范围，让视觉效果和多个阴影的厚重感匹配。
• 示例里的等效单阴影是0 0 .625rem .4rem #0dc0f7，这个值是视觉微调后的结果，但也有大致规律：当有N个相同的0 0 b c阴影时，等效模糊半径约为b / √N，扩展半径约为b * (1 - 1/√N)。比如N=4时，√4=2，模糊半径就是1rem/2=0.5rem，扩展半径是1rem*(1-1/2)=0.5rem，和示例数值接近，实际使用时可再根据视觉效果微调。
• 这么做的本质是用扩展半径替代多个阴影叠加带来的厚重感，用更小的模糊半径保持边缘过渡自然，避免单个大模糊半径导致阴影过淡。

示例代码验证 #

以下是你提供的代码，可以直接运行对比三种阴影的视觉效果：

CSS代码

body {
  background: #000f4d;
}

button {
  display: block;
  color: white;
  background-color: #000f4d;;
  border: .1rem solid white;
  border-radius: 2.5rem;
  padding: .8rem 1.3rem;
  margin: 2rem;
}

.multiple {
  box-shadow: 0 0 1rem #0dc0f7,  0 0 1rem #0dc0f7, 0 0 1rem #0dc0f7, 0 0 1rem #0dc0f7;
}

.equivalent {
  box-shadow: 0 0 .625rem .4rem #0dc0f7;
}

.single {
  box-shadow: 0 0 1rem #0dc0f7;
}

HTML代码

<button class="multiple">Multiple shadows</button>
<button class="equivalent">Equivalent single shadow</button>
<button class="single">Single shadow</button>

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