如何在图像中绘制边框？

Question

我试图在图像中绘制边框但是与边缘分开但到目前为止没有任何成功。请看一个例​​子

Answer 1

使用第二个div上的绝对定位将一个div放在另一个div上，并在第一个div上使用relative。然后将图像设置为底部div的背景。然后顶部div需要有一个边框和一个透明背景：https://jsfiddle.net/5r1st8cL/

<div class="one">
  <div class="two"></div>
</div>

  .one {
    background-image: url('');
    background-size: cover;
    width: 600px;
    height: 400px;
    background: yellow;
    position: relative;
 }
 .two {
    width: 500px;
    height: 300px;
    position: absolute;
    border: 3px solid black;
    top: 50px;
    left: 50px;
    background: transparent;
  }

Answer 2

尝试以下代码。的 ref

img {
  outline: 1px solid white;
  outline-offset: -4px;
}