如何在CSS中获取图像周围的白色轮廓

Question

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

如果我这样做了：

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

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

有没有更好/更有效的方法呢？

Answer 1

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

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

JS Fiddle demo

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

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

JS Fiddle demo

由于box-shadow不会取代元素，因此margin需要box-shadow才能显示所有方面。

Answer 2

只需使用border属性就可以执行您想要的操作：

border: solid white 4px;

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

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

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