如何在图像中绘制边框？答案

【问题标题】：How to draw a border within an image?如何在图像中绘制边框？
【发布时间】：2016-06-07 05:09:33
【问题描述】：

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

【问题讨论】：

请提供一些代码。它可能很有用。

标签： css

【解决方案1】：

在第二个 div 上使用绝对定位，在第一个 div 上使用相对定位，将一个 div 放在另一个上。然后将您的图像设置为底部 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;
  }

【讨论】：

【解决方案2】：

试试下面的代码。 ref

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

【讨论】：

非常感谢大家。我终于测试了 Microsmsn 提供的解决方案，它运行良好。最简单最好的解决方案