Question

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

Answer 1

尝试显示图像块。

.badge_image img {
    display: block;
}

Answer 2

要么：

向display:block;添加img。
在line-height上定义0px div。

图像是内联元素，因此文本空间留下该行。

Demo

Answer 3

display: block 解决方案在某些情况下对我不起作用，但将其放在与 box-shadow 相同的元素上。

backdrop-filter: blur(0px);

我不确定为什么会这样，但确实如此。

Answer 4

另一种方法是将virtical-align: top;添加到img。

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

4 个答案: