css3 shadow box top and left + right for half height

Question

我正在尝试为顶部以及左右两侧设置 css 阴影，但高度降低了。我熟悉 blur/radius，但我希望阴影非常短。 picture from wix template（还不能上传，抱歉）

有人可以帮助我吗？我看到的最后一次机会，我可能会使用 border-image 但我想尽可能避免使用它。谢谢大家的建议

Answer 1

一种可能性，使用带透视的伪旋转并且尺寸仅为高度的一半：

.test {
  width: 200px;
  height: 200px;
  margin: 10px;
  border: solid 1px red;
  position: relative;
  background-color: white;
}

.test:after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  height: 50%;
  left: 0px;
  box-shadow: 0px 0px 15px 2px black;
  transform: perspective(400px) rotateX(-10deg);
  transform-origin: center top;
  z-index: -1;
}

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

css3 shadow box top and left + right for half height

css3 shadow box top and left + right for half height

css

shadow

border-box