所以我正在研究一个纯粹的CSS语音泡泡http://bit.ly/zlnngM但是我希望边界环绕整个语音泡泡,如http://bit.ly/zUgeZi所示.我正在使用以下标记;
<div class="speech-bubble"><p>This is a speech bubble created using only CSS. No images to be found here...</p></div
到目前为止,我的样式如下;
.speech-bubble {
margin: 3em;
width: 320px;
padding: 10px;
background-color:rgba(250, 250, 250, 0.95);
color: #666;
font: normal 12px "Segoe UI", Arial, Sans-serif;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 10px solid rgba(0,0,0,0.095);
}
.speech-bubble:before
{
content: "";
border: solid 20px transparent; /* set all borders to 10 pixels width */
border-top: 0; /* we do not need the top …css ×1