CSS3/HTML5如何实现不均匀的盒子阴影？

Question

我正在尝试为网站创建不均匀的阴影效果，请参考下面的示例图： 不幸的是，我认为这不能通过CSS3来实现。据我所知，box-shadow属性只能用于创建均匀分布的阴影。

然而，我的CSS3/HTML5知识有限，我想知道是否有任何方法可以在不使用图像/额外div/相对和绝对定位的情况下实现这一点，因为我宁愿避免这些方法。

- Sean

---

你可以在这个div后面放一个正方形的div，使用transform旋转它，并将box-shadow应用于它。 - Asad Saeeduddin

你有没有想过是否可以用.some-element:after来实现这个功能（这样我就可以避免在HTML中添加与样式相关的div）？ - Sean

Answer 1

这是我能找到的最接近你图像预览的方法，你可以将它们包裹在一个相对定位的div中，并按照位置设置定位。

演示

HTML

<div class="container"></div>
<div class="shadow"></div>

CSS

.container {
    width: 300px;
    height: 200px;
    margin: 50px;
    background-color: #eeeeee;
    z-index: 1;
}


.shadow {
    -ms-transform: rotate(2deg); /* IE 9 */
    -webkit-transform: rotate(2deg); /* Safari and Chrome */
    -o-transform: rotate(2deg); /* Opera */
    -moz-transform: rotate(2deg); /* Firefox */
    box-shadow: 0 6px 16px -6px black;
    height: 20px;
    width: 300px;
    position: absolute;
    top: 225px;
    z-index: -1;
    left: 50px;
}

- Mr. Alien

---

我还成功地使用了伪元素来消除额外div的需求：http://jsfiddle.net/8XN8j/ 我会进行一些调整，但这基本上就是我正在寻找的！ - Sean

@SeanDunwoody 不用谢 :) 只要确保一件事，我匆忙制作它是因为我需要离开，所以将它们包装在一个带有 position: relative; 的 div 中，并且还有一件事就是它是 CSS3，所以请确保它支持所有浏览器，当然我已经添加了所有专有的 CSS，但还是要注意一下 ;) - Mr. Alien

Answer 2

我能提供的最好建议是在你的div后面放置一个伪元素：

div::after{
    content:"";
    display:block;
    transform:rotate(5deg);
    box-shadow:1px 5px 50px #444;
    z-index:-1;
}​

演示

我猜你想要玩一下值，尝试尽可能接近原始值。

- Christoph

---

很酷，我没有想到可以在元素上使用变换来尝试操纵阴影！我会调整数值并看看能否得到我需要的效果。 - Sean

Answer 3

可以的，只需要使用几个属性。例如：

html:

<div class="main">
  <div class="shadow-phantom">
  </div>
</div>​

CSS：

.main {
  width:100px;
  height:100px;
  background-color:#e1e1e1;
  margin:10px auto;
}  


.shadow-phantom {
 -webkit-border-radius: 12px 110px 20px 25px;
 border-radius: 12px 110px 20px 25px;
 margin: -4px 0px 0px -0px;
 -moz-background-clip: padding; 
 -webkit-background-clip: padding-box; background-clip: padding-box;
 -webkit-box-shadow: 7px 7px 10px 0px #AAA; 
      box-shadow: 7px 7px 10px 0px #AAA; 
    width:90px;
  height:100px;
  position:absolute;
  z-index:-1;

  -webkit-transform: rotate(5.5deg);  
 -moz-transform: rotate(5.5deg);  
  -ms-transform: rotate(5.5deg);  
   -o-transform: rotate(5.5deg);  
      transform: rotate(5.5deg); 
  }​

请查看此代码片段以查看其实际效果：http://jsfiddle.net/wandarkaf/MKV4Q/

- wandarkaf

---

我想知道以下问题：1）为什么有些人会在其他两个人回答后20分钟内发布几乎相同的答案；2）为什么你包含了background-clip——它对当前标记没有任何影响；3）为什么你没有使用伪元素，而是用一个多余的元素来混淆标记。 - Christoph

跨浏览器兼容性。 - wandarkaf

这个参数在任何情况下都是无效的：伪元素在任何能处理转换、盒阴影和背景剪辑的浏览器中都得到支持，而background-clip对该场景没有任何影响。 - Christoph

如果你不想让背景颜色泄漏到边框外面，那么使用 -moz-background-clip 是非常有用的。 - wandarkaf

你的意思是像这样？相信我，这没有任何用处，因为你在示例中并没有指定任何边框... - Christoph