сращивание теней между двумя div

* { 
  box-sizing: border-box; 
} 
 
html, 
body { 
  padding: 0; 
  margin: 0; 
  width: 100%; 
  height: 100%; 
  background: #fff; 
} 
 
ul { 
  list-style-type: none; 
  padding: 1rem 0 0; 
  margin: 0; 
  display: flex; 
  flex-flow: row nowrap; 
  align-items: stretch; 
  background: #fff; 
  text-align: center; 
   
  box-shadow: 0px 0px 5px rgba(0,0,0,.5); 
} 
 
ul li { 
  width: 25%; 
  height: 100px; 
  line-height: 100px; 
  position: relative; 
} 
 
ul .active { 
  box-shadow: 0px 0px 5px rgba(0,0,0,.5); 
} 
 
ul .active:after { 
  content: ''; 
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: -5px; 
  height: 5px; 
  background: #fff; 
}

<ul> 
  <li>1</li> 
  <li>2</li> 
  <li class="active">3</li> 
  <li>4</li> 
</ul>