border高级应用（2）---气泡式对话框（自制圆角，三角）

（1）要想实现上述效果，首先解决圆角问题

  

原理

 

代码

<style>
.item{ width:100px; margin:0 auto; padding:0; font:Arial, Helvetica, sans-serif 14px bolder;}
.item p{ padding:0 0 2px 0; margin:0px; text-align:center; background:#cc6; border:#000 solid 1px; border-top:0;}
.item div{ height:1px; overflow:hidden; background:#cc6; border-left:#000 solid 1px;border-right:#000 solid 1px;}
.item .row1{ margin:0 5px; background:#000;}
.item .row2{ margin:0 3px; border-width:2px;}
.item .row3{ margin:0 2px;}
.item .row4{ margin:0 1px; height:2px;}
</style>

<div class="item">
<div class="row1"></div>
<div class="row2"></div>
<div class="row3"></div>
<div class="row4"></div>

<p>Home</p>
</div>

（2）三角突出

一般情况下, 我们设置盒子的宽高度, 及上下左右边框, 会呈现如下图

#test1 {
    height:20px;
    width:20px;
    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid;
    border-width:20px;
}

在上面基础上, 我们把宽高度都设为0时, 会呈现上述的边界斜线.

#test2 {
    height:0;
    width:0;
    overflow: hidden; /* 这里设置overflow, font-size, line-height */
    font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
    line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid;
    border-width:20px;
}

这时, 其实我们已经看到有上下左右四个三角形了..如果, 我们把4种颜色, 只保留一种颜色, 余下3种颜色设置为透明(或者设置为和背景色相同的颜色), 那不就出现一个小三角了么

只保留上面的橙色, 看看

#test3 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 transparent transparent transparent;
    border-style:solid;
    border-width:20px;
}

可是, IE6下不支持透明啊~~~, 会出现下图的样子

IE6下, 设置余下三条边的border-style为dashed,,,即可达到透明的效果

#test4 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 transparent transparent transparent;
    border-style:solid dashed dashed dashed;
    border-width:20px;
}

当然, 在IE6下, 不设置透明, 将其颜色设置为背景色, 使其看不出来也是可以的.

准备工作做好下面来做气泡

<style>
* { padding:0; margin:0; font-size:12px; }
body { padding:50px; }
.main { width:400px; }
.row1, .row2, .row3, .row4, .row5, .row6, .row7, .row8 { height:1px; overflow:hidden; display:block; }
.row1, .row8 { height:0px; margin:0 5px; }
.row1 { border-bottom:#CCC solid 1px; }
.row8 { border-top:#CCC solid 1px; }
.row2, .row3, .row4, .row5, .row6, .row7 { border-left:#CCC solid 1px; border-right:#CCC solid 1px; }
.row2, .row7 { margin:0 3px; border-width:2px; }
.row3, .row6 { margin:0 2px; }
.row4, .row5 { margin:0 1px; height:2px; }
.row2, .row3, .row4, .row5, .row6, .row7, .content { background-color:#EEE; }
.content { border-left:solid #CCC 1px; border-right:solid #CCC 1px; padding:15px; position:relative; }
.content p { text-indent:2em; }
.content p.right { text-align:right; font-style:italic; }
/*尖角*/
.arrow { position:relative; width:20px; height:20px; margin: 0 0 0 15px; }
.arrow .arrow_border, .arrow .arrow_content { width:0; height:0; overflow:hidden; border-width:10px; border-style:dashed dashed solid dashed; }
.arrow .arrow_border { border-color:transparent transparent #CCCCCC transparent; }
.arrow .arrow_content { border-color:transparent transparent #EEEEEE transparent; position:absolute; top:1px; }
</style>

<div class="arrow">
<div class="arrow_border"></div>
<div class="arrow_content"></div>
</div>
<div class="main">
<div class="row1"></div>
<div class="row2"></div>
<div class="row3"></div>
<div class="row4"></div>
<div class="content">
<p>aaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaa</p>
<p class="right">---mantuoluo</p>
</div>
<div class="row5"></div>
<div class="row6"></div>
<div class="row7"></div>
<div class="row8"></div>
</div>