如何使用 CSS 添加图像内侧边框

Question

我想在所有产品图像上显示一条内线，如下图所示。

我的 HTML 代码是这样的：

<div class="gallery">
    <div class="picture">
        <img id="main-product-img-43" src="//images/thumbs/0000072_25-virtual-gift-card_550.jpeg">
    </div>
</div>

如何使用 css/js 实现这一点？

Answer 1

尝试这个：

CSS：

img{
  outline: 1px solid white;
  outline-offset: -4px;
}

HTML：

<div class="gallery">
    <div class="picture">
            <img id="main-product-img-43" itemprop="image" title="Picture of $25 Virtual Gift Card" src="//images/thumbs/0000072_25-virtual-gift-card_550.jpeg" alt="Picture of $25 Virtual Gift Card">

    </div>
</div>