特殊的CSS影子盒＆amp; |其他解决方案的建议

Question

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

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

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

Answer 1

您可以将此用于box-shadow。我不确定你是否也想要显示绿色条。所以我放弃了。

在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伪