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

1

看看这个Fiddle，虽然我还没有能够在 IE8 中测试..

CSS：

.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: red solid 1px;
    z-index:2;
}

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

.bubble:before 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 11px 12px;
    border-color: red transparent;
    display: block;
    width: 0;
    z-index: 0;
    top: -12px;
    left: 24px;
}
于 2013-11-12T16:31:53.267 回答
0

在jsFidde上查看工作版本

我前段时间做过，你可以改变颜色，它没有在 IE 上测试，我目前在 OSX 上，试图在 IE xD 上查看它是一团糟

html:

<div class="dialog">
    <div class="triangleOutline">
        <div class="triangle"></div>
    </div>
    <div class="dialogBox">
        Hello!<br>
        I'm a full CSS fancy dialog box :D
    </div>
</div>

CSS：

body{
    font-size: 100%;
    font-family: "Arimo";
    background: #eee;
}

.triangle,
.triangleOutline{
    position:relative;
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 7px;
    border-bottom-color: #aaf;
}

.triangleOutline{left: 15px;}

.triangle{
    top: -6px; /* outline's width - 1 */
    left: -7px; /* outline's width */
    border-bottom-color: white;
}

.dialogBox{
    background: white;
    border: 1px solid #aaf;
    padding: 0.75em;
    border-radius: 3px;
    min-height: 1.5em;
    line-height: 1.5em;
}

随心所欲地改变颜色，我猜你没有使用那些颜色，对吧？XD

于 2013-11-12T16:36:34.973 回答
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 回答