CSS CSS中img上的box-shadow
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6930991/
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 on img in CSS
提问by Warface
Is it possible to add a shadow to the img attribute in CSS, I tried and it doesn't seems to work. Am I correct or my code is just messed up
是否可以在 CSS 中为 img 属性添加阴影，我试过了，但似乎不起作用。我是正确的还是我的代码搞砸了
CSS
CSS
.image_carousel img {
padding-right: 14px;
display: block;
float: left;
box-shadow: 3px 3px 1px #ccc;
-webkit-box-shadow: 3px 3px 1px #ccc;
-moz-box-shadow: 3px 3px 1px #ccc;
}
HTML
HTML
<div class="image_carousel"><img src="../imgs/image.jpg" width="800" height="600" alt=""/></div>
回答by Joseph Marikle
looks like you can:
看起来你可以：
.image_carousel img {
margin-right: 14px;
display: block;
float: left;
box-shadow: 3px 3px 1px #ccc;
-webkit-box-shadow: 3px 3px 1px #ccc;
-moz-box-shadow: 3px 3px 1px #ccc;
}<div class="image_carousel"><img src="//placehold.it/300/f80/fff" alt=""/></div>回答by kaveman
According to the specification, box-shadowapplies to all elements. But this is the CSS3 spec, and so only a handful of browsers will support it for now:
根据规范，box-shadow适用于所有元素。但这是 CSS3 规范，因此目前只有少数浏览器支持它：
- IE9
- FF4
- Opera 10.5
- Safari 3
- Chrome 1
- IE9
- FF4
- 歌剧 10.5
- 野生动物园 3
- 铬 1
are the ones that come to mind now
是现在想到的那些
回答by RamseyTech
img.carousel {box-shadow: 3px 3px 1px #ccc;} /*works fine
<img src="whatever.png" class="carousel">
or try for fun
或尝试找点乐子
img.carousel {border:1px solid #ccc;}
img.carousel:hover {box-shadow: 3px 3px 10px #ccc;}
回答by Nikit Barochiya
<style>
img {
-webkit-box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.41);
-moz-box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.41);
box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.41);
}
</style>
<img src="http://jadide.ir/wp-content/uploads/2016/06/2.jpg" alt=""/>
