如何在图像内定义细白边框[重复]答案

【问题标题】：How to define a thin white border inside an image [duplicate]如何在图像内定义细白边框[重复]
【发布时间】：2021-10-08 18:38:30
【问题描述】：

我正在尝试在照片中添加白色边框。目前我已经尝试了所有方法，并且最接近于轮廓的预期结果，只是无法将其四舍五入。

有人有解决办法吗？

这是关于细白线，只需要四舍五入。

代码：

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

【问题讨论】：

其他潜在求解器的提示：图像没有伪元素。
但是 figure 元素对于带有可选 figcaption 的自包含 img 内容在语义上是正确的，它是否可以用作替代解决方法，因为 img 本身确实缺乏伪元素。 Git 完成了。

标签： css outline

【解决方案1】：

在图像顶部使用伪元素。

img {
  height: 75vh;
  width: auto;
  border-radius: 1rem;
  display: block;
  z-index: -1;
  position: relative;
}

div {
  display: inline-block;
  margin: 1em;
  position: relative;
}

div:after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 2px solid white;
  border-radius: 14px;
}

<div>
  <img src="https://images.unsplash.com/photo-1625516838246-ff33acad73ec?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyODAwMTMzNQ&ixlib=rb-1.2.1&q=85" alt="">
</div>

【讨论】：

似乎您只需为该解决方案链接a dupe。不过，这并不是真正的要求。

【解决方案2】：

您可以使用两个 div 块。外部 - 作为容器，带有背景图像（或带有 img 标签），内部用于线条。这有点冗长，但非常灵活

  .external {
    width: 100px;
    height: 100px;
    background-image: url('https://picsum.photos/536/354');
    background-size: cover;
    text-align: center;
    position: relative;
    border: 1px black solid;
    border-radius: 15px;
  }
  .internal {
    border-radius: 5px;
    border: 1px red solid;
    width: calc(90% - 2px);
    height: calc(90% - 2px);
    position: absolute;
    top: 5%;
    left: 5%;
  }

<div class="external">
  <div class="internal"></div>
</div>

【讨论】：

问题不在于在 div 上设置边框。如果是这样，那么 SO 上可能有一百个重复。