如何添加邊框的CSS

我使用純CSS講話泡沫下面的代碼，但我卻仍然不能添加邊框整個泡沫包括一面箭頭僅講話泡沫如何添加邊框的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; 
}

結果

enter image description here

，如果我加入邊界代碼border:2px solid #493A34;在類.bubble

結果

enter image description here

問題

如何將邊框添加到箭頭？〜任何想法

編輯：這是fiddle link與box-shadow應用。

來源

2013-01-09 Reham Fahmy

你可以做一個稍微大一點的棕色箭頭用：後psudo元素，並將其放置在較小的綠色箭頭後面（使用：之前），然後向下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; 
}

來源

2013-01-09 17:54:01 circusdei

用了幾個小時，發現許多答案，但所有工作不正常，但你的工作是完美的.. :)非常感謝，我會研究你的每一個驚人的想法。 –

一招了一點，但你可以添加一個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; 
}

來源

2013-01-09 17:52:59

我認爲，陰影會在bubbble。或者泡沫邊界將在箭頭之上。 – circusdei

你還沒有得到這個效果！該技巧仍然出現無邊界... http：//jsfiddle.net/aEmGa/ –

如何添加邊框的CSS

回答

相關問題