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

Question

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

如果我这样做了：

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

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

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

Answer 1

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

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

JS 小提琴演示。

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

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

JS 小提琴演示。

因为box-shadow不会取代元素，margin所以需要允许box-shadow在所有方面显示。

Answer 2

只需使用边框属性就可以满足您的要求：

border: solid white 4px;

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

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

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