特殊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 伪

特殊CSS阴影框&|其他变通建议

Special CSS shadow box &| other work-around suggestion

html

css

shadow