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

Question

第一张图片是草图截图，它是一个没有背景的正方形，有一个 1 像素的边框和一个 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

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

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

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

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

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

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

linear-gradient 的另一个想法：

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

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