如何制作带边框的CSS语音气泡？

Question

我想制作一个只有CSS的语音泡泡。到目前为止，我有这个......

实施例

CSS

div {
    position: relative;
    background: #fff;
    padding: 10px;
    font-size: 12px;
    text-align: center;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

div:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    bottom: -60px;
    margin-left: -15px;
    border-width: 30px 20px 30px 20px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

jsFiddle

... 几乎完全我想要的东西。但是，我希望整个事物周围有一个轻微的边框。

显然，在主要部分，将border: 1px solid #333添加到div就很简单。

但是，由于气泡的尾部是边框黑客，我无法使用它的边框。

我尝试设置0 0 1px #333的方框阴影，但浏览器将边框应用于元素的矩形形状（我猜他们应该做什么）。

jsFiddle

我的下一个想法是找到一个看起来像气泡尾巴的Unicode字符，并将其绝对定位在那里，边框为text-shadow，并使用主要气泡的z-index来隐藏顶部阴影文本。

什么Unicode字符适合这个？我应该做些不同的事吗？我需要诉诸图像吗？

我只需要支持Mobile Safari。 ：）

Answer 1

<div>Hello Stack Overflow!<span></span></div>

div span:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    bottom: -51px;
    margin-left: -15px;
    border-width: 20px 20px 30px 20px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

http://jsfiddle.net/QYH5a/

Answer 2

这是一个类似的解决方案：

http://jsfiddle.net/JyPBD/2/

<div>Hello Stack Overflow!<span></span></div>

body {
   background: #ccc;   
}

div {
    position: relative;
    background: #fff;
    padding: 10px;
    font-size: 12px;
    text-align: center;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: 1px solid #333;
}
div:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    bottom: -60px;
    margin-left: -16px;
    border-width: 30px 20px 30px 20px;
    border-style: solid;
    border-color: green transparent transparent transparent;

}

div span
{
    border-color: #FF0000 transparent transparent;
    border-style: solid;
    border-width: 25px 15px;
    bottom: -51px;
    margin-left: -65px;

    position: absolute;
    z-index: 10;
}

Answer 3

对于你建议的Unicode字符方法，最合适的是▼U + 25BC BLACK DOWN-POINTING TRIANGLE。我不知道iOS是否有字形。

Answer 4

您可以使用filter属性box-shadow()来执行此操作...

-webkit-filter: drop-shadow(1px 1px 1px #111) drop-shadow(-1px -1px 1px #111);

jsFiddle