Закругленная тень CSS

Сначала элемент body имеет белый фон, а ваши элементы - тень в своих псевдоэлементах. Давайте рассмотрим заказ покраски, и мы увидим, что белый фон нарисован над вашими тенями:

The stacking context background and most negative positioned stackingcontexts are at the bottom of the stack, while the most positive positioned stacking contexts are at the top of the stack.

И если мы проверим позже, то увидим это:

'z-index: auto', treat the element as if it created a new stacking context, but any positioned descendants and descendants which actually create a new stacking context should be considered part of the parentstacking context, not this new one.

Ваш псевдоэлемент - это позиционированные потомки .item, а у этого есть z-index:auto, поэтому они принадлежат контексту стекирования родительского элемента, которым является .body, а этот - не создавая контекст стекирования, поэтому мы перемещаемся выше. Другими словами, у нас есть только один контекст наложения в этом случае, которому принадлежат все элементы, и поскольку псевдоэлемент имеет отрицательный z-index, они будут напечатаны первыми с учетом порядка рисования.

Чтобы этого избежать, нам нужно поиграть с контекстом наложения. Например, мы можем добавить z-index:0 в .item

.body{
  background: white;
}

.bother{
  width: 500px;
  background: lightgre;
  margin-left:50px;
}
.item{
  margin-top: 20px;
  margin-left:50px;
  background: grey;
  width: 500px;
  position: relative;
  z-index:0;
}
.item:after{
  content: "";
    position: absolute;
    z-index: -1;
    box-shadow: 0 0 40px red;
    bottom: 0;
    width: 100%;
    height: 50%;
    left: 0;
    border-radius: 100%;
}

<div class = "body">
  <div class = "item">shadow me</div>
  <div class = "item">I should be shadowed but I'm also bothering</div>
  <div class = "bother">I'm bothering</div>
  <div class = "item">shadow me</div>
</div>

Если мы обратимся к той же спецификации, мы увидим:

For those with 'z-index: 0' treat the stacking context generatedatomically.

Таким образом, псевдоэлемент теперь будет принадлежать контексту наложения, созданному .item, и будет напечатан над фоном .body.

Мы также можем применить некоторые стили к .body, чтобы создать еще один контекст наложения:

.body{
  background: white;
  transform:translate(0)
}

.bother{
  width: 500px;
  background: lightgre;
  margin-left:50px;
}
.item{
  margin-top: 20px;
  margin-left:50px;
  background: grey;
  width: 500px;
  position: relative;
}
.item:after{
  content: "";
    position: absolute;
    z-index: -1;
    box-shadow: 0 0 40px red;
    bottom: 0;
    width: 100%;
    height: 50%;
    left: 0;
    border-radius: 100%;
}

<div class = "body">
  <div class = "item">shadow me</div>
  <div class = "item">I should be shadowed but I'm also bothering</div>
  <div class = "bother">I'm bothering</div>
  <div class = "item">shadow me</div>
</div>

В этом случае мы добавили преобразование в .body, так что оно создаст новый контекст наложения, и псевдоэлементы будут ему принадлежать; таким образом, тень также будет напечатана поверх белого фона.

Вы также заметите четкую разницу между обоими случаями. В первом случае тень элемента перекрывает предыдущий элемент, и тень печатается над серым фоном, НО не во втором случае. Опять порядок покраски!

В первом случае псевдоэлементы принадлежат контексту наложения .item, поэтому порядок будет следующим: распечатать первый .item со всеми его потомками, затем распечатать второй и так далее. Затем внутри .item мы сначала печатаем фон, а затем рассматриваем потомков (псевдоэлементы и их тени).

Во втором случае псевдоэлементы принадлежат контексту наложения .body, поэтому внутри него мы сначала печатаем белый фон, затем все негативные z-index (псевдоэлементы и их тени), а затем печатаем все .item.

Если мы вернемся к исходному коду, вы также заметите, что первый элемент имеет тень, окрашенную в правильно, но, учитывая приведенное выше объяснение, этого не должно быть. Это потому, что вы сталкиваетесь с проблемой коллапса полей, из-за которой margin-top первого элемента переходит к .body, поэтому тень первого переполняет .body, НО все еще нарисованный над ним.

Если вы добавите небольшой отступ к .body, тень исчезнет, ​​потому что margin-top будет оставаться на верхнем элементе, а белый фон скроет тень, потому что он покроет область margin-top.

.body{
  background: white;
  padding:1px;
}

.bother{
  width: 500px;
  background: lightgre;
  margin-left:50px;
}
.item{
  margin-top: 20px;
  margin-left:50px;
  background: grey;
  width: 500px;
  position: relative;
}
.item:after{
  content: "";
    position: absolute;
    z-index: -1;
    box-shadow: 0 0 40px red;
    bottom: 0;
    width: 100%;
    height: 50%;
    left: 0;
    border-radius: 100%;
}

<div class = "body">
  <div class = "item">shadow me</div>
  <div class = "item">I should be shadowed but I'm also bothering</div>
  <div class = "bother">I'm bothering</div>
  <div class = "item">shadow me</div>
</div>

Теперь видна только нижняя тень, потому что у нас нет margin-bottom, поэтому у нас есть переполнение, как вначале с первым, когда было схлопывание полей.