如何在CSS中的图像周围获得白色轮廓答案

【问题标题】：How to get a white outline around an image in CSS如何在CSS中的图像周围获得白色轮廓
【发布时间】：2012-06-11 12:37:23
【问题描述】：

我正在尝试设置一个带有白色边框的图像，如下所示：

如果我这样做了：

 <ul class="learn">
    <li class="thumbnaile" > <img id="portrait" src="/assets/allyson.jpg" class="stretch" />
    </li>
 </ul>

...然后将填充添加到 .thumbnaile...

有没有比这更好/更有效的方法？

【问题讨论】：

标签： css

【解决方案1】：

您可以使用border（这当然是显而易见的选择），但也可以使用padding 和box-shadow：

img {
    background-color: #fff;
    padding: 4px;
}

在此示例中，img 元素由4px 填充，这允许background-color 从图像“后面”延伸出来。

img {
    margin: 4px 0 0 4px;
    box-shadow: 0 0 0 4px #fff;
}

因为box-shadow 不会替换元素，所以需要margin 才能让box-shadow 显示在所有方面。

【讨论】：

【解决方案2】：

只需使用 border 属性就可以满足您的需求：

border: solid white 4px;

只要需要边框的唯一部分是（矩形图像的）外边缘，它将围绕它，如图所示。如果边框应该切入图像，您可能需要修改box-sizing；但对于填充，默认值将起作用。

边框将在<li> 或<img> 标签上起作用，具体取决于您希望如何布置图像（<li> 将允许多个图像之间没有边框他们）。

将padding 添加到类中会产生类似的效果，但对于用于调整元素大小和定位的框而言，其行为会有所不同。 <li> 上的填充将与<img> 上的适当边框产生非常接近的效果，但是将边框放在<img> 本身上可能会简化您的 CSS。

【讨论】：