请尝试以下方法:
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>
#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 -->
.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>
.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>
我认为这就是内部曲线边框在图像内部。
.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>
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;
}