盒子阴影被切断了

Question

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

盒子阴影通常只会在div边缘上流血,但不会在这个边缘上流血.

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

继承人我用于盒子阴影的css:

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

干杯

Answer 1

问题是你的中心主要div正在从阴影的边缘切割出来.设置overflow:visible在此,您应该看到它.

Answer 2

如果box-shadow正在被切断,请确保overflow:visible在包含元素的任何div上设置.

Answer 3

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

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

Answer 4

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

例如，我有一个 div，我使用position:absolute和bottom:-30px将其放置在相对于其父div的某个位置。IE，而且只有 IE，正在剪掉盒子阴影的顶部和底部。添加此轮廓即可修复​​它，而无需更改位置。

outline: 10px solid transparent;