如何使用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>

Answer 2

 #div { position: relative; border: 1px solid black; height: 100px; width: 200px; border-radius: 6px; } #div:after { content: ""; position: absolute; top: 5px; bottom: 5px; left: 5px; right: 5px; border: 1px solid magenta; border-radius: 5px; } 

 <div id="div"> </div> <!-- Replace the div with your image --> 

Answer 3

那一個很簡單。 將圖像放入容器中，並給它一個后。 在絕對位置和邊界之后給出它。

看例子：

 .gallery { height: 300px; /* change/remove as required */ width: 400px; /* change/remove as required */ border-radius: 10px; /* change/remove as required */ overflow: hidden; position: relative; } .picture:after { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border: 2px solid pink; border-radius: 10px; content: ''; display: block; } 

 <div class="gallery"> <div class="picture"> <img id="main-product-img-43" itemprop="image" title="Picture of $25 Virtual Gift Card" src="http://lorempixel.com/400/300" alt="Picture of $25 Virtual Gift Card"> </div> </div> 

Answer 4

 .gallery { border: solid 1px #DADADA; height: 200px; width: 400px; } .picture { border: solid 1px #FF69B4; height: 180px; width: 380px; margin: 10px auto; } 

 <div class="gallery"> <div class="picture"> //Image code </div> </div> 

Answer 5

我認為就是這樣，圖像中的內部彎曲邊框。

 .picture { position: relative; display:inline-block; } .picture:before { border-radius: 10px; background: none; border: 2px solid red; content: ""; display: block; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; pointer-events: none; } .picture img{ vertical-align : middle; } 

 <div class="gallery"> <div class="picture"> <img id="main-product-img-43" itemprop="image" title="Picture of $25 Virtual Gift Card" src="https://placehold.it/200x100" alt="Picture of $25 Virtual Gift Card"> </div> </div> 

Answer 6

使用pseudo-element選擇器。

img {
 position: relative:
}
img:before { // this case i use :before
  content: '';
  position: absolute;
  left: 2%;
  top: 2%;
  width:98%;
  height: 98%;
  border: 1px solid pink;
}