盒子阴影被切断答案

【问题标题】：box-shadow being cut off盒子阴影被切断
【发布时间】：2012-10-03 17:13:46
【问题描述】：

在使用 CSS3 的 box-shadow 时，我遇到了一个我通常不会遇到的问题。

盒子阴影通常只是在 div 边缘溢出，但不会出现在这个边缘。

box-shadow 在顶部和右侧被切断..

这是我用于 box-shadow 的 css：

-moz-box-shadow: 0 0 5px #555;
-webkit-box-shadow: 0 0 5px #555;
 box-shadow: 0 0 5px #555;

干杯

【问题讨论】：

标签： css

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

使用填充 + 负边距，例如：

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

【讨论】：

【解决方案4】：

我在 IE 中多次遇到这个问题，我发现最好的解决方案是在 div 周围使用透明轮廓。这似乎可以防止 IE 剪裁框阴影，即使在 Gecko 和 Webkit 没有剪裁的情况下也是如此。使用大纲来解决这个问题的一大好处是它不会影响 div 的位置。

例如，我有一个 div，我使用 position: absolute 和 bottom: -30px 将它放在相对于其父 div 的特定位置。 IE，并且只有 IE，正在切断盒子阴影的顶部和底部。添加这个轮廓修复它，而不改变位置。

outline: 10px solid transparent;

【讨论】：

【解决方案5】：

您可以正确设置此样式的 img 标签以显示阴影框

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

【讨论】：

【解决方案6】：

你可以使用

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

改为

【讨论】：