box-shadow will overlap instead of overwrite-CodePudding

I don't know how to describe clearly. I will use following code to demonstrate:

.parent { position: relative; }
.box { position: absolute; width: 100px;  height: 100px; box-shadow: 0 0 10px black; }
.single { left: 200px; }

<div class="parent">
  <div class="a box">
  </div>
  <div class="b box">
  </div>
  <div class="single box">
  </div>
</div>

As a result, the left boxes have darker box-shadow because the box shadows are overlapped instead of overwrite.

Is there a solution? The html structure cannot be updated. The only thing that can update is the a and b. For example: .a { ... } .b { ... }

CodePudding user response：

You could try putting an opaque background behind each box-shadow so that the box-shadows don't overlap. Here's an example where I apply a background color to the "box" divs and place children divs with class "shadow" inside the boxes. The children divs have the box-shadow effect.

.parent { position: relative; }
.box { position: absolute; width: 100px;  height: 100px; background: #ffffff;}
.single { left: 200px; }
.shadow { position: absolute;  margin: 10px; width: 80px; height: 80px; box-shadow: 0 0 10px black; }

<div class="parent">
  <div class="a box">
    <div class="shadow" />
  </div>
  <div class="b box">
    <div class="shadow" />
  </div>
  <div class="single box">
    <div class="shadow" />
  </div>
</div>

CodePudding user response：

EDIT: Working solution with JS

const boxes = document.getElementsByClassName("box");
for(let i = 1; i < boxes.length; i  ) {

    if(boxes[i].getBoundingClientRect().x === boxes[i-1].getBoundingClientRect().x 
    && boxes[i].getBoundingClientRect().y === boxes[i-1].getBoundingClientRect().y) {
      boxes[i].style.boxShadow = "none";
    }

}

.parent { position: relative; }
        .box { position: absolute; width: 100px;  height: 100px; box-shadow: 0 0 10px black; }
        .single { left: 200px; }

<div class="parent">
    <div class="a box">
    </div>
    <div class="b box">
    </div>
    <div class="single box">
    </div>
</div>