css - 这个阴影可以在 CSS 中创建吗？

Question

如何在 CSS 中创建以下双角度阴影？甚至可能吗？

Answer 1

使用以下 HTML：

<div class="box"></div>​

和以下CSS：

.box {
    width:70%;
    height:200px;
    margin:40px auto;
    position: relative;
    background-color: red;
}
.box:before, .box:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.box:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}​

看这个活生生的例子

Answer 2

是： http: //matthamm.com/box-shadow-curl.html

另外： http: //nicolasgallagher.com/css-drop-shadows-without-images/demo/

Answer 3

您可以在盒子后面放置两个 div，并带有一个填充和一个盒子阴影。然后每个旋转一点。不过，我可能会用图像来做，看起来更干净。

Answer 4

是的，它是可能的，带有before和after伪元素。

你绝对定位这两个，你旋转它们，比如说 5deg（实际上，一个用 5，另一个用 -5），你给它们每个 a box-shadow，你调整散布值，使阴影看起来比盒子本身小. 并且您将它们设置为z-index它们出现在您的 div 后面。

链接到演示http://dabblet.com/gist/2789364

代码的相关部分

.box:before, .box:after {
    bottom: 0;
    min-height: 45%;
    width: 65%;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(204,204,204,.4);
    position: absolute;
    z-index: -1;
    background: rgba(204,204,204,.4);
    content: '';
}
.box:before {
    left: 5px;
    transform: rotate(-5deg);
}
.box:after {
    right: 5px;
    transform: rotate(5deg);
}