与阴影，边距，边框相比，盒阴影分配像素值的方式不同？顶部->右侧->底部->左侧不按顺序

Question

在代码段的 text1，text2，text3 div中，我正在使用padding CSS属性。正如在填充，边距，边框中，当我们分配像素值时，其顺序为：右上-右下-左或所有4个边，或“上-下”和“右-左”集相同。

例如

padding: 10px; =>所有4个边的填充等于10px

padding: 5px 20px; =>从上至下：5像素，从右至左：20像素填充

padding: 5px 10px 15px 20px; =>按top-> right-> bottom-> left

的顺序填充

那么，为什么此订单设置无法在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。