特殊 CSS 阴影框 &|其他解决方法建议

Question

我正在编写一些 HTML/CSS，我需要创建一个特殊的阴影，该阴影在 div 周围具有自定义宽度和高度。

最好的方法是什么？现在，我一直在尝试使用 两个 重叠的box-shadow，但我找不到让它看起来像图像的方法。

我知道我可以创建两个 div 并通过指定自定义高度和诸如此类的东西将它们相互贴合，但我想知道是否有更清洁、仅 css 的方法。

Answer 1

您可以将其用于箱形阴影。我不确定您是否也希望显示绿色条。所以我把它关了。

box-shadow 中有一个通常从不使用的扩展半径选项：

/* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 60px 0 0 -30px #ccc;

在这种情况下，您可以将其设置为负半径以达到您想要的效果。对另一侧做同样的事情，它应该可以工作。

div{
  background: cyan;
  position: relative;
  height: 600px;
  width: 400px;
  margin: 50px auto;
  box-shadow: 
    60px 0 0 -30px #ccc,
    -60px 0 0 -30px #ccc;
}

<div></div>

另一种选择是使用:before 或:after 伪