纯CSS实现各类⽓球泡泡对话框效果
抄⾃
边框法
我们⾸先来看下⾯⼀段样式代码：
.test{width:10px; height:10px; border:10px solid; border-color:#ff3300 #0000ff #339966 #00ff00;}
当某个div应⽤了上⾯这个样式后，结果会如何？见下图（截⾃Firefox3.5，IE浏览器有细节上的差异）：
仔细观察边框⾊的交界处，四个⾓落有4个45°的斜边，将整个边框分成了四个等腰梯形。
现在，设想⼀下，如果我们现在只保留⼀个⼀个上边框，其余边框均transparent透明（或与背景⾊同⾊），那么是不是就只显⽰⼀个上⾯红⾊的边框了，我们测试下，与上⾯类似的代码，只是修改下其余三个边框的颜⾊。
.test{width:10px; height:10px; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}
结果如下图（截⾃Firefox3.5）：
可见显⽰结果正如我们预想的。现在，再次开动脑筋，试想下，如果上⾯样式中的宽度和⾼度都是0，也就是width:10px; height:10px；变成了width:0; height:0;。对了，那么显⽰的将不会是个等腰梯形了，⽽是个等腰直⾓三⾓形。做个简单测试就知道答案了，如下的代码：
.test{width:0; height:0; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}
结果如下（依旧截图⾃Firefox3.5）：
此时，我们惊奇的发现，使⽤border属性居然产⽣了⼀个等腰直⾓三⾓形，⽽这个等腰直⾓三⾓形⽤做⽓泡对话框的尖⾓再合适不过了。
“边框法”实现⽓泡对话框demo
HTML代码：
<div class="org_box">
<span class="org_bot_cor"></span>
边框法实现底部90度尖⾓对话框
</div>
css代码：
.org_box{
height:80px;
line-height:80px;
margin-bottom:30px;
padding-left:2em;
background:#F3961C;
position:relative;
}
.
org_bot_cor{
width:0;
height:0;
font-size:0;
border-width:15px;
border-style:solid;
border-color:#f3961c transparent transparent;
_border-color:#f3961c white white;
overflow:hidden;
position:absolute;
left:60px;
bottom:-30px;
}
效果如下：
还没完，我们现在再开动我们智慧的⼤脑，设想下，如果各个边框的宽度不⼀致，⼜会产⽣怎样的结果呢？我们把测试代码再修改⼀下，让其边框宽度不⼀致，如下：
.test{width:0; height:0; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}
得到的结果如下图：
可以发现，尖⾓被拉⾼了，也就是相邻边框宽度的⽐例会影响单个边框形状的⾼与低的⽐例，这不难理解。
现在，我们再开动⼀下我们的脑筋，如果我们让相邻两个边框显⽰颜⾊会怎么样呢？测试⼀下吧，如
下代码：
.test{width:0; height:0; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ff3300 #ffffff #ffffff;}
结果如下图：
这不就不多说什么了，⼤伙⼉都看到，上个相邻边框尖⾓实现的⽓泡对话框效果吧。
“边框法”的⾼级应⽤
说是⾼级应⽤，准确讲应该是“复杂应⽤”。就是说⽤两个标签（或⽆标签 – 使⽤:before与:after伪类）形成的两个不同的边框进⾏组合显⽰实现的⼀些效果。
看下⾯两个图，本单元就是要实现下⾯两种效果：
1、效果(1)
CSS代码如下：
.test{width:300px; padding:30px 20px; margin-left:60px; background:#beceeb; position:relative;}
.test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.test span.bot{
border-width:20px;
border-style:solid;
border-color:#ffffff #beceeb #beceeb #ffffff;
left:-40px;
top:40px;
}
.p{
border-width:10px 20px;
border-style:dashed solid solid dashed;
border-color:transparent #ffffff #ffffff transparent;
left:-40px;
top:60px;
}
HTML代码如下：
<div class="test">
<span class="bot"></span>
<span class="top"></span>
CSS “边框法”实现⽓泡对话框效果⼀
</div>
2、效果(2)
CSS代码如下：
.test{width:300px; padding:30px 20px; border:5px solid #beceeb; position:relative;}
.test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.test span.bot{
border-width:20px;
border-style:solid dashed dashed;
border-color:#beceeb transparent transparent;
left:80px;
bottom:-40px;
div border属性}
.p{
border-width:20px;
border-style:solid dashed dashed;
border-color:#ffffff transparent transparent;
left:80px;
bottom:-33px;
}
HTML代码如下：
<div class="test">
<span class="bot"></span>
<span class="top"></span>
CSS “边框法”实现⽓泡对话框效果⼆
</div>
3、效果原理简述
原理的关键字就是“覆盖”，另外⼀个边框形成的尖⾓覆盖之前的⼀个，只要控制好覆盖的位置，然后就形成了实际上的不规则尖⾓或是尖⾓边框。您还可以发挥您的创造⼒，实现更多其它的效果。
关于“边框法”的⼀些说明
关于“边框法”，有⼀些知识必须要提⼀下。
1. IE6的奇偶bug
如果定位外框⾼度或是宽度为奇数，则IE6下，绝对定位元素的低定位和右定位会有1像素的误差。所以，尽量保证外框的⾼度或宽度为偶数值。
2. IE6的空div莫名⾼度bug
IE6下，空div会有莫名的⾼度，也就是说height:0；不顶⽤，此时形成的尖⾓的实际占⾼于其他浏览器是有差异的。可使⽤font-size:0; + overflow:hidden；修复此问题。
3. IE6不⽀持实线边框透明transparent属性
IE6不⽀持实线边框透明transparent属性，当某边框设置为transparent属性，且有宽度的话，那么透明会以默认的⿊⾊显⽰的。解决⽅法有两个，⼀是将需要隐藏的颜⾊设置为背景⾊，这样与透明效果⼀样，此法有局限性，在复杂“边框法”应⽤下是⾏不通的；⼆是可以使⽤dashed代替solid，可以实现IE6下边框transparent透明。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论