box-shadow назначает значения пикселей другим способом по сравнению с отступом, полем, границей?Не по порядку сверху-> справа-> снизу-> слева

Question

Ниже в фрагменте кода, в text1, text2, text3 div, я использую свойство CSS заполнения.Как и в случае отступов, полей, границ , когда мы присваиваем значения пикселей, все в порядке сверху-справа-вниз-слева, ИЛИ все 4 стороны ИЛИ в наборах «сверху вниз» и «справа налево».

например

padding: 10px; => отступ со всех 4 сторон равен 10px

padding: 5px 20px; => отступ сверху вниз: 5px и слева направо: 20px

padding: 5px 10px 15px 20px; => отступы в порядке сверху-> справа-> снизу-> слева

Тогда почему эти настройки порядка не работают в свойстве box-shadow: так же, как и выше?

.text1
{
  padding: 10px; /*padding from all 4 sides is equals 10px*/
  background: #D3D3D3;
}
.text2
{
  padding: 5px 20px; /*padding from top-bottom:5px and right-left:20px*/
  background: #D3D3D3;
}
.text3
{
  padding: 5px 10px 15px 20px; /*padding in order of top->right->bottom->left*/
  background: #D3D3D3;
}
.myDiv
{
  display: inline-block;
  border: 1px solid #333;
  width: 30px;
  height: 30px;
  margin-left: 30px;
}
#div1
{
  box-shadow: 5px #888; /*shadow not working on 4 sides*/
}
#div2
{
  box-shadow: 0 5px #888; /*shadow on bottom side*/
  /*here Why shadow to bottom instead of right-left*/
  /*here structure isn't same as padding order t-r-b-l ?*/
}
#div3
{
  box-shadow: 5px 0 0 0 #888; /*shadow on right side*/
}
#div4
{
  box-shadow: 0 0 5px 0 #888; /*shadow on all 4 sides*/
}

<div>
<span class="text1">text1</span>
<span class="text2">text2</span>
<span class="text3">text3</span>
</div>
<br><br><br>
<div>
<div class="myDiv" id="div1"></div>
<div class="myDiv" id="div2"></div>
<div class="myDiv" id="div3"></div>
<div class="myDiv" id="div4"></div>
</div>

Answer 1

Это потому, что box-shadow свойства отличаются от отступов / полей / границ, порядок следующий:

1. Горизонтальное смещение
2. Вертикальное смещение
3. Радиус размытия
4. Радиус распространения

А когда вы, например, делаете следующее:

#div3 {
  box-shadow: 5px 0 0 0 #888; /*shadow on right side*/
}

На самом деле, вы просто перемещаете тень вправо.Взгляните на эту таблицу, свойства описаны довольно хорошо здесь:

И ссылка для получения дополнительной информации: https://www.w3schools.com/cssref/css3_pr_box-shadow.asp.