3

私は純粋な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

4

2 に答える 2

2

:after 疑似要素で少し大きな茶色の矢印を作成し、小さい緑色の矢印 (: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;
}
于 2013-01-09T17:54:01.240 に答える
0

ちょっとしたトリックですがbox-shadow、境界として動作する a を追加できます (つまり、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-09T17:52:59.350 に答える