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

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

.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  Virtual Gift Card" src="https://placehold.it/200x100" alt="Picture of  Virtual Gift Card">

    </div>
</div>

Answer 2

试试这个：

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  Virtual Gift Card" src="//images/thumbs/0000072_25-virtual-gift-card_550.jpeg" alt="Picture of  Virtual Gift Card">

    </div>
</div>

Answer 3

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

Answer 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  Virtual Gift Card" src="http://lorempixel.com/400/300" alt="Picture of  Virtual Gift Card">

    </div>
</div>

Answer 5

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

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

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

How to add border inner side of image using CSS

html

css

image

border