html - 与填充、边距、边框相比，box-shadow 以不同的方式分配像素值？不是按上->右->下->左的顺序

Question

在下面的代码片段中，在 text1, text2, text3 div 中，我使用了 padding CSS 属性。就像在 padding, margin, border 中一样，当我们分配像素值时，它的顺序是 top-right-bottom-left OR all 4 sides OR same in "top-bottom"and "right-left"set。

例如

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

padding: 5px 20px; => padding from top-bottom:5px and right-left:20px

padding: 5px 10px 15px 20px; => padding in order of 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 属性与 paddings/margins/borders 不同，顺序如下:

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 .