html - 使用实际窗口和边框之间的空间创建插入窗口 boxshadow 边框

Question

我想使用 CSS 创建下图中所示的白色边框。在窗口内设置 25px 的白色边框。我尝试使用 box-shadow inset 但是无法在窗口边缘之间创建空间。

我使用了这个 CSS:

border: 3px solid white; //took this out but still no luck    
box-shadow: inset 0 0 0 5px #FFFFFF;

我也试过没有正常的边框。

我想我可以创建一个具有填充或边距的覆盖 div 并为其提供边框，但问题是内容需要在其下方滚动和点击。

目标:图标上方的白框。

Answer 1

使用伪元素

.parent {
  position: relative;
  height: 200px;
}
.wrapper {
  height: 100%;
  overflow-y: auto;
}
.content {
  height: 600px;
  background: url(http://lorempixel.com/600/600/abstract/1) no-repeat center center / cover;
}
.parent:after {
  content: '';
  position: absolute;
  left: 25px;
  top: 25px;
  right: 40px;
  bottom: 25px;
  border: 2px solid white;
}

<div class="parent">
  <div class="wrapper">
    <div class="content">
    </div>
  </div>
</div>