带有透明背景的CSS边框（从Sketch到HTML / CSS时）

Question

第一张图片是草图截图，它是一个没有背景的正方形和一个带有实心1px阴影的1像素边框。第二张照片是我尝试在html / css中制作它，但它会阻挡我的边框，即使背景是透明的。

如何让它看起来更像第一张图片？

代码：

.box {
  width:100px;
  height:100px;
  border: 4px solid #191919;
  box-shadow: 4px 4px 0 0 rgba(137, 137, 137, 0.48);
}

<div class="box">
</div>

Answer 1

使用伪元素创建第二个方块：

＆＃13;

＆＃13;

.box {
  border: 4px solid #191919;
  width:100px;
  height:100px;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:5px;
  left:5px;
  width:100px;
  height:100px;
  border: 4px solid rgba(137, 137, 137, 0.48);
  z-index:-1;
}

＆＃13;

<div class="box">
</div>

＆＃13;

＆＃13;

＆＃13;

或者像这样使用drop-shadow过滤器：

＆＃13;

＆＃13;

.box {
  width: 100px;
  height: 100px;
  border: 4px solid #191919;
  filter: drop-shadow(10px 10px 0px rgba(137, 137, 137, 0.48));
}

＆＃13;

<div class="box">
</div>

＆＃13;

＆＃13;

＆＃13;

linear-gradient的另一个想法：

＆＃13;

＆＃13;

.box {
  width: 100px;
  height: 100px;
  background:linear-gradient(to right,#191919 4px,transparent 4px, transparent 86px,#191919 86px,#191919 90px,transparent 0) 0 0/100px 90px no-repeat,
  linear-gradient(to bottom,#191919 4px,transparent 4px, transparent 86px,#191919 86px,#191919 90px,transparent 0) 0 0/90px 100px no-repeat,
  linear-gradient(to right,rgba(137, 137, 137, 0.48) 4px,transparent 4px, transparent 86px,rgba(137, 137, 137, 0.48) 86px,rgba(137, 137, 137, 0.48) 90px,transparent 0) 10px 10px/100px 90px no-repeat,
  linear-gradient(to bottom,rgba(137, 137, 137, 0.48) 4px,transparent 4px, transparent 86px,rgba(137, 137, 137, 0.48) 86px,rgba(137, 137, 137, 0.48) 90px,transparent 0) 10px 10px/90px 100px no-repeat;
}

＆＃13;

<div class="box">
</div>

＆＃13;

＆＃13;

＆＃13;