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>