CSS box-shadow 被切断
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12713492/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
box-shadow being cut off
提问by Brandon Fredericksen
While using CSS3's box-shadowI am having an issue I do not usually have.
在使用 CSS3box-shadow时，我遇到了一个通常不会遇到的问题。
The box shadow usually just bleeds over the div edges, but not on this one.
框阴影通常只是在 div 边缘上流血，但不是在这个边缘上。
box-shadowthat is being cut off on the top and right hand side..
box-shadow在顶部和右侧被切断..
Heres the css I'm using for 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;
Cheers
干杯
采纳答案by Brandon Fredericksen
If box-shadowis being cut-off, make sure overflow:visibleis set on any div(s) your element is contained in.
如果box-shadow正在被截断，请确保overflow:visible在您的元素所在的任何 div 上设置。
回答by quoo
The problem is your center-main div is cropping off the edge of the shadow. Set overflow:visibleon this and you should see it.
问题是您的中心主 div 正在从阴影的边缘裁剪。设置overflow:visible这个，你应该看到它。
回答by CSX321
I have run into this problem multiple times with IE, and the best solution I've found is to use a transparent outline around the div. This seems to prevent IE from clipping the box shadow, as it does even in cases where Gecko and Webkit don't. One great thing about using outline to fix this problem is that it doesn't affect the position of the div.
我在 IE 中多次遇到过这个问题，我发现的最佳解决方案是在 div 周围使用透明轮廓。这似乎阻止了 IE 裁剪框阴影，即使在 Gecko 和 Webkit 没有裁剪的情况下也是如此。使用大纲来解决这个问题的一个好处是它不会影响 div 的位置。
For example, I had a div with which I had used position: absoluteand bottom: -30pxto put it in a certain place relative to its parent div. IE, and only IE, was cutting off the top and bottom of the box shadow. Adding this outline fixed it, without changing the position.
例如，我有一个 div，我使用position: absolute和bottom: -30px将它放在相对于其父 div 的某个位置。IE，并且只有 IE，正在切断框阴影的顶部和底部。添加此轮廓固定它，而不改变位置。
outline: 10px solid transparent;
回答by Ferenc Sticza
use padding + negative margin like:
使用填充 + 负边距，例如：
.img {
padding: 10px;
margin: -10px;
}
回答by Roman P.
you can use
您可以使用
.img{
filter: drop-shadow(0 0 5px #555);
}
instead
反而
回答by Afshin
you can set this style img tag for show shadow-box correctly
您可以设置此样式 img 标签以正确显示阴影框
.img{
margin:20px;
-moz-box-shadow: 0 0 5px #555;
-webkit-box-shadow: 0 0 5px #555;
box-shadow: 0 0 5px #555;
}
