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

Question

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

我的HTML代码如下：

;

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

那个很简单。将图像放入容器中，并给它一个后。在绝对位置和边界之后给出它。

参见示例：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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;
}