CSS中“边框法”的高级应用（所有可遇到的聊天气泡）

一、说是高级应用，准确讲应该是“复杂应用”。就是说用两个标签（或无标签 – 使用: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;
}
.test span.top{
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;
}
.test span.top{
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透明。为什么能够实现透明？您可以参考默尘的这篇文章Dotted&Dashed终极分析及IE6透明边框，我说点题外话，其对原因的解释似乎说的通，但是，是不是如此，我是相当怀疑的，我尚未有时间验证，这个可以标记一下。

五、利用CSS3实现气泡样式的对话框

之前我们所说的一切，是全兼容现在所有主流浏览器的。而这里的方法，只支持对CSS3支持良好的浏览器，例如Firefox3.5+，chrome以及Safari。本文一开头的那张黄黄的大图就是使用的CSS3实现的圆形以及圆弧状的拐角尾巴。

效果的核心就是CSS3的圆角属性：border-radius，例如开始的大尾巴图片，就是使用border-radius实现的三个圆组成的，大圆形成主体内容，两个小一点的圆相互遮盖，形成圆弧小尾巴，但这个不具体讲，现在，以一个相对简单点的例子做示例。

CSS代码如下：

.test{
width:300px;
padding:80px 20px;
margin-left:100px;
background:#beceeb;
-webkit-border-top-left-radius:220px 120px;
-webkit-border-top-right-radius:220px 120px;
-webkit-border-bottom-right-radius:220px 120px;
-webkit-border-bottom-left-radius:220px 120px;
-moz-border-radius:220px / 120px;
border-radius:220px / 120px;
position:relative;
}
.test span{width:0; height:0; font-size:0; background:#beceeb; overflow:hidden; position:absolute;}
.test span.bot{
width:30px;
height:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
left:10px;
bottom:-20px;
}
.test span.top{
width:15px;
height:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
left:0px;
bottom:-40px;
}

HTML代码如下：

<div class="test">
<span class="bot"></span>
<span class="top"></span>
CSS3 border-radius实现气泡对话框效果
</div>

最后的效果如下图：



实现另一个类型的聊天气泡，没有边框的聊天气泡（没用用到边框，直接用背景颜色来弄，相对简单）

复制代码
代码如下:

<div class="arrow"></div>

<style type="text/css">

.arrow {

width:0;

height:0;

font-size:0;

border:solid 10px #000;

}</style>

这儿，我们可以得到一个黑色的正方形，其实这是边框组成的，因为div的宽度和高度都是0,。那么，我们具体来看看，div宽度和高度都是0时，它的上下左右四边框都是怎样的，下面我们把边框的各边颜色分别设置为不同颜色：

复制代码
代码如下:

<div class="arrow"></div>

<style type="text/css">

.arrow {

width:0;

height:0;

font-size:0;

border:solid 10px;

border-color:#f00 #0f0 #00f #000;

}

</style>

我们发现，原来当div的宽度和高度都是0的时候，它的整个边框是由四个三角形组成的，每一边为一个三角形，那么我们就可以利用这个特点，来做可爱的小尖角了。我们只要把不需要的三边的边框（三角形）的颜色设置为与背景相同即可，这样就只能看到你想要的那个三角形了，然后再利用定位调整一下位置就可以了。具体代码如下所示：

复制代码
代码如下:

<div class="send">

<div class="arrow"></div>

</div>

<style type="text/css">

body {

background:#4D4948;

}

.send {

position:relative;

width:150px;

height:35px;

background:#F8C301;

border-radius:5px; /* 圆角 */

margin:30px auto 0;

}

.send .arrow {

position:absolute;

top:5px;

right:-16px; /* 圆角的位置需要细心调试哦 */

width:0;

height:0;

font-size:0;

border:solid 8px;

border-color:#4D4948 #4D4948 #4D4948 #F8C301;

}

</style>

大功告成，效果如下图：



另个是用border的边框来实现，而且可以很好的控制箭头在右边框的位置，不需要自己一点点的调试

直接代码附上：

html：

<div class="send">
你好呀！！
<div class="arrow"></div>
</div>
CSS样式

.send {
position:relative;
width:150px;

padding:10px 10px;
height: auto;
min-height: 50px;
/*background:#F8C301;*/
border:5px solid orange ;
border-radius:5px; /* 圆角 */
margin:30px auto 0;
}

.send .arrow {
position:absolute;
/*下面是为了其位置进行初始化，可以很快的控制位置，不需要一点点的调试*/
top:10px;
right: 0px;
z-index: 40;
right:-14px; /* 圆角的位置直接是width的一半加上border的宽度。这样效果可以 */
width:17px;
height:17px;
background-color: white;
/*只显示上边框和右边框，然后旋转*/
transform: rotate(45deg);
border-top:solid 5px orange;
border-right: 5px solid orange;
}

最终效果图：

部分参考：张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]