【问题标题】: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,您应该会看到它。

    【讨论】:

    • 谢谢,我以为是这个问题,但我没有看到这个。你太棒了。
    • 或者你可以删除overflow:auto;
    【解决方案2】:

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

    【讨论】:

    • 我把原帖中的示例站点链接去掉了,所以我把这个解释留给以后遇到这个问题的人。
    • 如果需要overflow:hidden,如何才能显示阴影?例如,如果内容溢出则需要滚动的浮动仪表板网格
    • @DavidMays 您需要添加另一个包含足够边距/填充的 div,以便在这个带有溢出滚动的新容器中显示整个下拉阴影。
    【解决方案3】:

    使用填充 + 负边距,例如:

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

    【讨论】:

    • 2019 年 10 月。我在 IOS Chrome 上遇到了阴影问题。断断续续。这解决了它!谢谢。
    【解决方案4】:

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

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

    outline: 10px solid transparent;
    

    【讨论】:

    • 当您使用 box-shadow 作为伪响应边框时,这非常有效。
    【解决方案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);
    }
    

    改为

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-07-26
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-01-26
      • 2012-03-07
      相关资源
      最近更新 更多