css - 盒子阴影被切断

Question

在使用 CSS3box-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;

干杯

score 50 · Accepted Answer

问题是您的 center-main div 正在裁剪阴影的边缘。设置overflow:visible这个，你应该看到它。

score 32 · Accepted Answer

32

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

于 2012-10-03T17:22:36.003 回答

score 10 · Accepted Answer

10

使用填充 + 负边距，如：

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

于 2019-06-13T11:26:11.323 回答

score 4 · Accepted Answer

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

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

outline: 10px solid transparent;

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

0

您可以使用

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

反而

于 2020-03-02T16:46:00.777 回答

6 回答 6