盒子阴影被切断了

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被截断，请确保在您的元素所包含的任何div上设置overflow:visible。

Answer 3

我已经使用IE多次遇到此问题，我发现最好的解决方案是在div周围使用透明轮廓。这似乎可以防止IE剪切框阴影，就像Gecko和Webkit没有那样。使用outline解决这个问题的一个好处是它不会影响div的位置。

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

outline: 10px solid transparent;

Answer 4

您可以正确设置show shadow-box的样式img标记

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

Answer 5

您可以使用

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

代替

Answer 6

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

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