Html Webkit过滤器删除阴影

我很难覆盖（或只是删除）放置在下图所示文本上的

-webkit filter drop shadow

属性。我需要在语音气泡上放置阴影，但不需要在气泡下面的文本上。我尝试过将阴影设置为白色，但似乎没有效果。出于定位的原因，我需要将文本保留为气泡的子元素。有人能告诉我怎样才能达到预期的效果吗

小提琴

HTML

<div class="bubble bubble-left">This is line 1 in speech bubble left.<br/> 
      This is line 2 in the bubble,<br/> and this is line 3.
      <div class="title">Title for bubble</div>
</div>

---

尝试将过滤框阴影CSS属性更改为以下格式：

 -webkit-drop-shadow: (4px 4px 5px rgba(0, 0, 0, 0.5));
 -moz-drop-shadow: (4px 4px 5px rgba(0, 0, 0, 0.5));
 -ms-drop-shadow: (4px 4px 5px rgba(0, 0, 0, 0.5));
 -o-drop-shadow: (4px 4px 5px rgba(0, 0, 0, 0.5));

您可能需要根据自己的喜好调整长方体阴影值：

在这里拉小提琴：

另一种方法是将你的bubble链接标题从bubble容器中取出，并将它们放在一个新的相对div中。不过你必须对CSS做一些更改

<div class="wrap">
        <div class="bubble bubble-left">This is line 1 in speech bubble left.
            <br/>This is line 2 in the bubble,
            <br/>and this is line 3.</div>
        <div class="title">Title for bubble</div>
    </div>

这是语音泡泡左边的第一行。

这是气泡中的第2行，

这是第3行。
泡沫的标题

---

参见fiddle:

@Stefan V.这也是我的想法，但我希望避免这种情况。[对不起，我错误地覆盖了你之前的评论，Stefan]。这也是我的想法，但我希望避免这种情况。我不是CSS专家，到目前为止我在这方面花了太多时间，所以我想调整我现有的内容，而不是重新开始。实际上可能还有另一种方法。尝试以这种方式更改过滤器盒阴影属性：-webkit盒阴影，-moz盒阴影等。查看此小提琴：太完美了，谢谢Stefan！你能编辑你的答案包括这一点，然后我会接受它吗？

<div class="wrap">
        <div class="bubble bubble-left">This is line 1 in speech bubble left.
            <br/>This is line 2 in the bubble,
            <br/>and this is line 3.</div>
        <div class="title">Title for bubble</div>
    </div>