如何阻止多个div的box-shadow阴影颜色相互混合？

页面里有四个带box-shadow的div盒子，现在的问题是这四个盒子的阴影颜色会互相混合。

现有代码 #

CSS代码 #

.text1{
    background-color: red;
    -webkit-box-shadow:0px 0px 150px 20px rgba(255,0,0,0.5);
    -moz-box-shadow: 0px 0px 150px 20px rgba(255,0,0,0.5);
    box-shadow: 0px 0px 150px 20px rgba(255,0,0,0.5);
}

.text2{
    background-color: blue;
    -webkit-box-shadow:0px 0px 150px 20px rgb(0, 130, 255, 0.7);
    -moz-box-shadow: 0px 0px 150px 20px rgba(0,130,255,0.7);
    box-shadow: 0px 0px 150px 20px rgba(0, 130, 255, 0.7);
}

.text3{
    background-color: green;
    -webkit-box-shadow:0px 0px 150px 20px rgba(0,255,0,0.7);
    -moz-box-shadow: 0px 0px 150px 20px rgba(0,255,0,0.7);
    box-shadow: 0px 0px 150px 20px rgba(0,255,0,0.7);
}

.text4{
    background-color: yellow;
    -webkit-box-shadow:0px 0px 150px 20px rgba(255,255,0,0.7);
    -moz-box-shadow: 0px 0px 150px 20px rgba(255,255,0,0.7);
    box-shadow: 0px 0px 150px 20px rgba(255,255,0,0.7);
}

HTML代码 #

<div class="categories">
    <div class="row">
        <div class="game text1"><a href="#">text</a></div>
        <div class="game text2">text</div>
    </div>
    <div class="row">
        <div class="game text3">text</div>
        <div class="game text4">text</div>
    </div>
</div>

阴影互相混合是因为半透明阴影在浏览器中会叠加渲染，以下几种方法可以解决：

• 给每个盒子套裁剪容器
  给每个.game盒子加个父容器，设置和页面一致的背景色，再加上overflow: hidden，把超出容器的阴影裁掉，就不会和其他盒子的阴影叠加了：

  .game-wrap {
      background-color: #fff; /* 换成你的页面背景色 */
      overflow: hidden;
      /* 如果盒子有圆角，加上border-radius: inherit; */
  }
  

  修改后的HTML：

  <div class="categories">
      <div class="row">
          <div class="game-wrap">
              <div class="game text1"><a href="#">text</a></div>
          </div>
          <div class="game-wrap">
              <div class="game text2">text</div>
          </div>
      </div>
      <div class="row">
          <div class="game-wrap">
              <div class="game text3">text</div>
          </div>
          <div class="game-wrap">
              <div class="game text4">text</div>
          </div>
      </div>
  </div>
  

• 缩小阴影范围或降低透明度
  调小box-shadow的模糊半径（第三个值）、扩散半径（第四个值），或者降低阴影的透明度，让阴影影响范围变小，减少叠加概率：

  /* 示例：调整text1的阴影 */
  .text1{
      background-color: red;
      box-shadow: 0px 0px 80px 10px rgba(255,0,0,0.3);
  }
  

• 增加盒子间距
  直接给.game加margin，让盒子之间的距离超过阴影的扩散范围，自然就不会混合了：

  .game {
      margin: 80px; /* 根据你的阴影大小调整数值 */
  }
  

• 使用隔离属性（效果有限）
  给.game添加isolation: isolate，可以让元素的渲染独立于周围元素，不过这个方法对阴影叠加的改善不如前几种明显：

  .game {
      isolation: isolate;
  }
  

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