使用CSS3/HTML5的不均匀盒阴影？

我正在尝试为网站创建一个不均匀的阴影效果，请参见下面我需要实现的示例：

不幸的是，我不认为CSS3可以做到这一点，据我所知，长方体阴影属性只能用于创建均匀分布的阴影

---

然而，我对CSS3/HTML5的了解并不多，因此我想知道是否有人知道如何在不使用图像/额外div/相对和绝对定位的情况下实现这一点，我宁愿避免使用图像/额外div/相对和绝对定位？

我能想到的最好办法是在您的div后面放置一个伪元素：

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

---

我想您应该对这些值进行一些处理，并尽可能地接近原始值。

这是我与您的图像预览最接近的结果，您可以将它们包装在一个定位的相对div中，并相应地设置位置

HTML

---

是的，你可以使用一些属性。i、 e:

html:

---

检查这把小提琴，看看它在起作用：

你可以做的是在这把小提琴后面放一个正方形div，用transform旋转它，并在上面加上方框阴影。你知道我是否可以用它来完成吗。一些元素：之后（这样我就可以避免在HTML中乱放与样式相关的div）？酷，我没有想过在元素上使用变换来尝试操纵阴影！我会搞乱这些值，看看是否能得到我需要的。我还设法使用伪元素来消除对额外div的需要：我会做一些调整，但这正是我想要的@SeanDunwoody you welcome:）只需确定一件事，我很快就完成了，因为我需要离开，所以用

位置：relative将它们包装在一个div中

还有一件事是它是CSS3，所以请确保它支持所有浏览器，当然我已经添加了所有专有的CSS，但是太多了；）我想知道1）为什么有些人在其他两个人20分钟后发布了一个几乎重复的答案2）为什么你包含了背景剪辑-它对当前标记完全没有影响3）为什么你没有使用伪元素，而是用一个额外的无用元素来混乱标记。跨浏览器兼容性。此参数在任何情况下都是无效的：每个浏览器都支持伪元素，可以处理变换和框阴影，背景剪辑对该场景绝对没有影响。如果您不希望bg颜色泄漏到边界之外，则使用-moz背景剪辑非常有用。您的意思是？相信我，这是没有用的，因为你没有在你的例子中指定任何边界。。。

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

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

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

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