如何添加边框到CSS只讲话泡泡

Question

我正在使用以下代码进行纯css语音气泡，但是我仍然无法为整个气泡添加边框，包括下方的箭头

HTML

<div class="bubble">Welcome</div>

CSS代码

.bubble {
height: 30px;
width: 574px;
background-color: #9FC175;
background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
border-radius: 5px;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),3px 3px 0 hsla(0,0%,0%,.1);
text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
position: absolute;
}

.bubble:after, .bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #9FC175;
bottom: -25px;
content: '';
position: absolute;
right: 25px;
}

.bubble:before {
border-right: 25px solid hsla(0,0%,0%,.1);
bottom: -28px;
right: 22px;
}

结果

如果我在课程border:2px solid #493A34;

添加了边框代码.bubble

结果

问题

如何将边框添加到箭头中？ 〜任何想法

编辑：以下是应用了box-shadow的{​​{3}}。

Answer 1

您可以使用：在psudo-element之后制作稍大的棕色箭头，并将其放置在较小的绿色箭头（使用：before）之后，然后向下2px以创建边框效果。

这是小提琴：http://jsfiddle.net/rhGCb/

和css：

.bubble {
  border:2px solid #493A34;
height: 30px;
width: 574px;
background-color: #9FC175;
background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
border-radius: 5px;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),3px 3px 0 hsla(0,0%,0%,.1);
text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
position: absolute;
}



.bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #493A34;
bottom: -27px;
content: '';
position: absolute;
right: 23px;

}


  .bubble:after {
border-bottom: 25px solid transparent;
border-right: 25px solid #9FC175;
bottom: -23px;
content: '';
position: absolute;
right: 25px;
}

Answer 2

有点技巧，但你可以添加一个行为边框的box-shadow（意思是blur设置为0）：

.speech-bubble{
    /* ... */

    /* 2px = border-width #333 = border-color */
    -webkit-box-shadow:0 0 0 2px #333;
            box-shadow:0 0 0 2px #333;
}