这个阴影可以用CSS创建吗？

Question

以下双角度阴影在CSS中如何创建？这是否有可能？

- Hopstream

---

我认为这些应该是图片 - CSS 将定位在角落附近... - Randy

那么在CSS3中就没有办法做到吗？ - Hopstream

http://nicolasgallagher.com/css-drop-shadows-without-images/demo/ - Stefan

下次搜索“高级阴影技巧”谷歌。 - Vladimir Starkov

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;
}​

请查看这个实际的例子

（该例子涉及it技术）

- jacktheripper

---

不是早期版本，需要添加更多内容。 - jacktheripper

Answer 2

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

还有：http://nicolasgallagher.com/css-drop-shadows-without-images/demo/

这些链接提供了关于如何使用CSS实现阴影效果的技术。

- imsky

---

第二个链接中的第一个示例非常有效，需要Hopstream。 - Vladimir Starkov

Answer 3

您可以在盒子后面放置两个带填充和盒阴影的 div，然后将它们各自旋转一点。不过我可能会使用图像来实现，因为更加简洁。

- user1337

Answer 4

是的，可以通过使用before和after伪元素来实现。

您需要将它们两个绝对定位，旋转它们，比如说5度（实际上，一个旋转5度，另一个旋转-5度），为它们各自设置一个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);
}

- Ana