是否可以使用CSS创建这些阴影？

Question

这是我创建的带有阴影的电路板的图像。该板应该靠在墙上，因此两侧的阴影呈三角形。

是否可以仅使用CSS创建这样的阴影？此外，如果可能，该方法是跨浏览器兼容的吗？

Answer 1

是否可以仅使用CSS创建这样的阴影？

是，使用伪元素，框阴影和2D变换 - 特别是旋转。一个例子就是这个答案的结尾。

该方法是跨浏览器兼容的吗？

排序。理想的代码与旧版本的IE不完全兼容。要获得这种支持，您需要做出一些妥协，我将在下面列出：

以下是支持细分：

:before和:after - 仅限IE8 + 。为了获得更深入的支持，您可以使用语义较少的div元素替换它们。

具有IE特定规则的

rotation - IE6 + ;显示这些规则的参考位于示例末尾的注释中

box-shadow - IE9 + 要使这些影子在IE6 +中正常工作，您可以使用CSSPie。

理想代码示例

Here's a very quick example to get you started.

<div id="board">
  Place image here!
</div>

CSS

#board {
  position: absolute;
  left: 50px;
  top: 50px;
  background: #e5e5e5;
  text-align: center;
  width: 100px;
  height: 100px;
}
#board:before {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 0;
  left: 5px;
  width: 5px;
  height: 50%;
  background: rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: -5px 0 10px rgba(0,0,0, 0.7);
  -moz-box-shadow: -5px 0 10px rgba(0, 0, 0, 0.7);
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  -o-transform: rotate(6deg);
  -ms-transform: rotate(6deg);
  transform: rotate(6deg);
}
#board:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 0;
  right: 5px;
  width: 5px;
  height: 50%;
  background: rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 5px 0 10px rgba(0,0,0, 0.7);
  -moz-box-shadow: 5px 0 10px rgba(0, 0, 0, 0.7);
  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -ms-transform: rotate(-6deg);
  transform: rotate(-6deg);
}

我应该从哪里开始？

• 您需要在早期IE中实现轮换语法，或使用Javascript库添加支持，both of which can be read about over here.
• 您可能还希望阴影像在图像中一样切断。这可以通过掩盖与其下方元素突出的阴影部分来完成。
• 我也很快把它扔在一起，所以你可能想调整它以使阴影看起来就像你想要的那样。