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

Question

这是我创建的带有阴影的板的图像。板应该靠在墙上，所以阴影在两边都是三角形的。

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

Answer 1

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

是的，使用伪元素、盒子阴影和 2D 变换——特别是旋转。这个答案的末尾有一个例子。

该方法是否跨浏览器兼容？

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

这是支持细分：

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

rotation–具有 IE 特定规则的IE6+ ；显示这些规则的参考在示例末尾的注释中

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

理想代码示例

这是一个非常快速的示例，可以帮助您入门。

<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 库来添加支持，这两者都可以在这里阅读。
• 您可能还希望阴影像在您的图像中那样被切断。这可以通过用其下方的元素覆盖突出的阴影部分来完成。
• 我也很快将它们组合在一起，因此您可能需要对其进行调整以使阴影看起来像您想要的那样。