我正在向包含img的元素中添加框阴影,并在该元素的底部创建一个任意的白色边框。没有通过CSS施加边框(我什至尝试过border:none;没有运气的情况下重写)。直接应用于图像时,它会正确显示。但是当应用于包含图像的div时,会出现边框。
任何帮助,感激不尽。
<style>
html,body,div,img {margin:0; padding:0;}
body {padding:50px;}
.badge_image {
float:left;
/* css drop shadow */
-webkit-box-shadow: 1px 1px 5px 0px #a2958a;
-moz-box-shadow: 1px 1px 5px 0px #a2958a;
box-shadow: 1px 1px 5px 0px #a2958a;
}
</style>
<div class="badge_image">
<img src="badge-image.jpg" height="75" width="75" />
</div>
<br clear="all" /><br clear="all" />
<img src="badge-image.jpg" height="75" width="75" class="badge_image" /><!-- works fine -->
Run Code Online (Sandbox Code Playgroud)
小智 6
尝试显示图像块。
.badge_image img {
display: block;
}
Run Code Online (Sandbox Code Playgroud)