以下の画像のように、すべての商品画像に1つの内部ラインを表示したいと考えています。 
CSSを使用して画像のボーダー内側を追加する方法
このような私のHTMLコード：それはCSS/JSを使用可能にするにはどうすればよい
<div class="gallery">
<div class="picture">
<img id="main-product-img-43" src="//images/thumbs/0000072_25-virtual-gift-card_550.jpeg">
</div>
</div>
？
これは非常に簡単です。イメージをコンテナに入れて、後にそれを与えます。それを絶対的な位置と境界の後に与えます。
例を参照：
.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>イメージ内の内側の湾曲したボーダーだと思います。
.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>これを試してみてください：
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がこのプロパティをサポートしていないことを覚えておいてください。 –
使用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;
}
.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>CSSを読み込み可能な形式にしてください。 –
#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。真実。更新しました。 –