0

青い吹き出しを作成する次の CSS があります (JS フィドル: http://jsfiddle.net/C5N2c/ :

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

.bubble 
{
    cursor: pointer;
    position: absolute;
    left:30px;
    width: 200px;
    height: 50px;
    padding: 0px;
    background: blue;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: blue solid 6px;

}

.bubble:after 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 10px 10px;
    border-color: blue transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: -10px;
    left: 26px;
}

.bubble:before 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 15px 15px;
    border-color: blue transparent;
    display: block;
    width: 0;
    z-index: 0;
    top: -21px;
    left: 21px;
}

小さな吹き出しの矢印を含め、この吹き出しの端に 1px の赤い境界線を追加したいと考えています。これどうやってするの？IE8 に準拠している必要があります。

4

3 に答える 3

0

このコードを試してください：

.bubble 
{
    cursor: pointer;
    position: absolute;
    left:30px;
    width: 200px;
    height: 50px;
    padding: 0px;
    background: blue;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: blue solid 6px;
    box-shadow: 0 0 0 1px red;
}

.bubble:after 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 15px 15px;
    border-color: blue transparent;
    display: block;
    width: 0;
    z-index: 0;
    top: -19px;
    left: 21px;
}

.bubble:before 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 15px 15px;
    border-color: red transparent;
    display: block;
    width: 0;
    z-index: 0;
    top: -21px;
    left: 21px;
}

このjsfiddleを参照してください。

于 2013-11-12T16:41:02.663 に答える