问题是你的center-main div裁剪掉了阴影的边缘。设置overflow:visible，你应该能看到它。

如果box-shadow被截断，请确保overflow:visible设置在包含元素的任何div上。

使用填充+负边距，如：

.img {
  padding: 10px;
  margin: -10px;
}

我在使用IE时多次遇到这个问题，我发现最好的解决方案是在div周围使用透明的轮廓。这似乎可以防止IE剪切框阴影，即使在Gecko和Webkit没有的情况下也是如此。使用轮廓来解决这个问题的一个好处是它不会影响div的位置。
例如，我有一个div，我使用了position：绝对和底部：-30px将其放置在相对于父div的某个位置。IE，也只有IE，将框阴影的顶部和底部切掉。添加此轮廓将其固定，而不会改变位置。

outline: 10px solid transparent;

您可以设置此样式img标记，以便正确显示阴影框

.img{
  margin:20px;
 -moz-box-shadow: 0 0 5px #555;
  -webkit-box-shadow: 0 0 5px #555;
  box-shadow: 0 0 5px #555;
 }

您可以使用

.img{
    filter: drop-shadow(0 0 5px #555);
}

取而代之

我设法解决了我的本地项目上的相同问题，方法是将图像设置为具有以下css属性：

position: relative;