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

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

如果我这样做了:

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

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

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

最佳答案

您可以使用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在所有侧面显示。

关于css - 如何在CSS中的图像周围获得白色轮廓，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10974494/