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

【问题标题】：How to add border inner side of image using CSS如何使用CSS在图像的内侧添加边框
【发布时间】：2016-11-24 20:19:03
【问题描述】：

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

我的 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？

【问题讨论】：

标签： html css image border

【解决方案1】：

我想就是这样，图像内部的内弯曲边框。

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

【讨论】：

他希望边框在图像内
@Bálint。真的。已更新。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

那个很简单。将图像放入容器中，然后对其进行处理。在绝对位置和边框之后给出它。

看例子：

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

试试这个：

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>

【讨论】：

如果你使用这个，那么记住IE不支持这个属性