如何使用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实现这一点？

- Divyang Desai

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>

- Gunjal Ray

---

如果您使用此属性，请记住IE不支持此属性。 - Bálint

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

- Bálint

Answer 3

那很简单。将图像放入容器中，并添加一个after。将该after设置为绝对定位和边框。

看下面的例子：

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

- Sander Koedood

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>

- Mohit Tanwani

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>

- Theodore K.

---

他希望边框在图像内部。 - Bálint

@Bálint。真的。已更新。 - Theodore K.

Answer 6

使用伪元素选择器。

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

- Jefsama