带有透明背景和伪元素的CSS box-shadow

Question

我有一个div，我希望它看起来像一个带有盒阴影的气泡。目前它看起来是这样的：

问题是我无法弄清楚如何在伪元素“tail”上添加阴影。这可能吗？如果我在伪元素上添加box-shadow，则会出现以下情况，这显然不是我想要的：

我真的很感激任何关于此的指导。谢谢 JS Fiddle 代码:

#container {
  height: 500px;
  background-color: #Febb68;
  padding: 30px;
}
#bubble {
  height: 200px;
  width: 200px;
  padding: 50px 60px 0;
  position: relative;
  z-index: 10;
  border-radius: 30px 0;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 0 10px 1px #944;
  margin-bottom: 55px;
}
#bubble:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-top: 85px solid rgba(255, 255, 255, 0.85);
  border-right: 85px solid transparent;
  border-left: 0px solid transparent;
}

<div id='container'>
  <div id='bubble'>
    ABC
  </div>
</div>

编辑：这个问题与CSS Speech Bubble with Box Shadow不同，因为这个问题中的背景是透明的（这不能改变，因为最终的背景是一个图像而不是一个实心颜色），并且指针只倾斜在一侧。以下是那个问题的解决方案，它具有透明的背景：http://jsfiddle.net/mek5Z/2140/

- SNAG

---

可能是CSS带盒阴影的对话框的重复问题。 - Salman A

@SalmanA 这不是那个问题的重复。被接受答案采用的黑客攻击对这个问题无效。 - SNAG

Answer 1

我已经成功得到了这个结果，但它需要优化：

<div id='bubble' class="filter-drop-shadow">

.filter-drop-shadow {
    -webkit-filter: drop-shadow( 0 10px 1px #944);
    -moz-filter: drop-shadow(0 10px 1px #944);
    filter: drop-shadow(0 10px 1px #944);
    }

fiddle

- TiyebM

---

请注意，IE不支持filter，因此无需使用-ms-前缀，并且对于此属性不存在-o-前缀（请参见canIuse）。 - web-tiki

-moz-前缀从未存在过。在Firefox中，滤镜从一开始就没有前缀的支持。 - Ana

Answer 2

由于无法评论，所以只能写下这些内容，但也许这些参考资料会有所帮助。

CSS带有盒阴影的对话框

以及

如何创建不需要图像的CSS3对话框

- Scanner

---

@SNAG，是的，我看到第一篇文章对你不起作用。试试第二篇文章，里面有一些关于样式伪元素的好建议。 - Scanner