CSS Box-Shadow为Div添加任意白色边框

joh*_*ese 3 css border css3

我正在向包含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)

  • 8 年后,仍然是一个问题:) 非常感谢 :D (2认同)