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

Div*_*Div 3 html css image border

我想在所有产品图像上显示一条内线,如下图所示。在此输入图像描述

我的 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>
Run Code Online (Sandbox Code Playgroud)

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

小智 6

尝试这个:

CSS:

img{
  outline: 1px solid white;
  outline-offset: -4px;
}
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)