如何在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小提琴演示.

在这个例子中,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属性即可完成您想要的操作：

border: solid white 4px;

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

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

添加padding到类中将具有类似的效果，但是在用于确定元素大小和位置的框方面会有所不同。上的填充<li>效果与上的适当边框非常接近<img>，但是将边框放在其<img>自身上可能会简化CSS。