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

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 -->

- johnkeese

---

它们在Chrome 14中对我来说看起来完全一样。http://jsbin.com/eqamid/edit#preview - Thomas Shields

@Thomas，我在Windows 7上使用Chrome 14.0.835.29查看你的链接时，第一张图片显示了边框。 - andyb

哇，不用管了。它确实出现了。只是在JSBin链接的预览窗格中没有显示出来，我的错。 - Thomas Shields

你们的回答速度真是太快了，谢谢！另外值得一提的是，在我的演示代码中我使用了HTML doctype...但如果切换到xhtml 1.0 transitional，一切都很好。真是疯狂的事情。 - johnkeese

Answer 1

尝试使用"display block"来显示图片。

.badge_image img {
    display: block;
}

- kuyabiye

---

Kraz基本上说了同样的话，但为了简单起见标记了这个。 - johnkeese

8年过去了，问题仍然存在 :) 非常感谢 :D - Petar

Answer 2

两种方法：

1. 给你的元素添加display:block;属性。
2. 在你的
   元素上定义line-height为0px。

图片是一个内联元素，所以会留下文本空间，导致出现这个问题。

演示

- Kraz

Answer 3

"

display: block的解决方案对我在几个情况下都不起作用，但将此属性与box-shadow放在同一个元素上可行。

"

backdrop-filter: blur(0px);

我不确定为什么它能工作，但它确实能。

- Regular Jo

Answer 4

另一种实现方式是在 img 中添加 vertical-align: top;。

- kizu