在实际窗口和边框之间创建嵌入窗口框阴影边框

Question

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

我用过这个css：

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

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

我想我可以创建一个具有填充或边距的叠加div并给它一个边框，但问题是内容需要可滚动并在其下方可点击。

目标： 图标上方的白框。

Answer 1

使用伪元素

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

希望这有帮助。

＆＃13;

＆＃13;

body{
  background: #000;
}

    .wrapper{
     width: 500px;
     padding: 25px;
     border: 3px solid #CCC;
    }
    .content{
     border: 1px solid #fff;
     padding: 15px;
     color: #fff;
     height: 400px;
    }

＆＃13;

<div class="wrapper">
      <div class="content">
        this is your content div with white border
      </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用透明边框将阴影设置在您想要的位置。

剩下的问题是将图像扩展到边框。为此使用background-origin。

.test {
  height: 250px;
  width: 400px;
  background-image: url(http://lorempixel.com/600/400);
  background-origin: border-box;
  background-size: cover;
  border: 50px transparent solid;
  box-shadow: inset 0px 0px 5px 5px cyan;
}

<div class="test">
</div>