Question

我有以下创建蓝色气泡的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标准。

Answer 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;
}

Answer 2

查看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

Answer 3

试试这段代码：

.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。

CSS边界脑力激荡

3 个答案: