css实现气泡框效果(示例加插图)

前提：气泡框或提示框在网页中很常见，实现的方式也很多。我们以前是把图片剪下来，然后通过‘定位’来定位在对应的位置，但是这样维护起来很麻烦。例如，如果设计师想换成另一种颜色或另一种颜色，我们必须再次剪切图片。让我们学习如何使用html css来达到这种效果！以下效果：。

和

我们可以分析一下：要达到这个效果无非就是一个矩形和一个小三角形，然后三角形就可以定位了，那么如何通过css制作小三角形呢？首先，让我们看看css边框属性。当我们将div边框颜色设置为不同的颜色时，我们可以看到所有四条边都变成了矩形。div class=' demo '/div . demo { width :50 px；高度：50 px；边框宽度：50 px；border-style : solid；边框-颜色： # CCC # 00F # 933 # 0C 9；}图片：

如果我们继续将div的宽度和高度设置为0，四条边将变成三角形。演示{ width:0高度：0；边框宽度：50 px；border-style : solid；边框-颜色： # CCC # 00F # 933 # 0C 9；}

但是IE6上下是三角形，左右是矩形框：如下：。

实验表明，当div的字体大小和行高都设置为0时，div的四条边在IE6下都能形成一个完美的三角形：代码如下：演示{ width:0高度：0；边框宽度：50 px；border-style : solid；边框-颜色： # CCC # 00F # 933 # 0C 9；线高：0；font-size :0；}很明显，我们只需要一个三角形，所以我们可以通过将其他三种颜色设置为透明或与背景颜色相同来制作三角形。将其他三种颜色设置为透明，即颜色的值为透明。如果其他三种颜色与页面背景相同，虽然视觉上只能看到一个三角形，但是一旦背景颜色发生变化，其他三种颜色也会发生变化。以下代码：演示{ width:0高度：0；边框宽度：50 px；border-style : solid；边框-color:#CCC透明透明；线高：0；font-size :0；}但是IE6下有问题。IE6不支持透明如下：。

但是通过实验发现，当边框样式设置为虚线时，IE6下的其他三面都会是透明的！如下：。

或者将上述代码更改如下：演示{ width:0高度：0；边框宽度：50 px；border-style :实线虚线虚线；边框-color:#CCC透明透明；线高：0；font-size :0；}既然我们可以模拟一个小三角形，那么我们就可以用矩形和三角形的组合作为演示来实现上面两种效果！首先，我们设计一个矩形框，然后将小三角形定位在矩形框上。如下所示：

代码如下：div class='longen'span/span我是longen我在泡泡箱/div . longen {位置：相对；宽度width:300px高度：100 px；border:5px纯红；} .longen span { position : absolute；left:100pxbottom :-40px；边框宽度：20 px；border-style :实线虚线；边框颜色：红色透明透明；font-size :0；线高：0；}现在指示方向的三角箭头是实心的，但我们想要的是空心的效果。我们将叠加一个与气泡框背景颜色相同的小三角形，然后将叠加的小三角形移动到一个位置。首先需要调整HTML结构，如下图所示。

代码如下：div class=' longen ' span/span em/em我是龙恩我在气泡框内/div .longen { position:relative宽度宽度：300像素高度：100 pxborder:5px纯红；} .longen span {位置：绝对；left :100 px bottom :-40px；边框宽度：20 px边框样式：实线虚线；边框颜色：红色透明透明；字号：0；线高：0;}.longen em {位置：绝对；底部：-34px；左侧：100像素边框宽度：20 px边框样式：实线虚线；边框-颜色：#FFF透明透明；字号：0；线高：0;} 下面我们再来看看第二种不规则的效果该怎么实现呢？

超文本标记语言代码和前面的一样：div class=' longen ' div class=' arrow ' em/em span/span/div我是龙恩我在气泡框内/divcss改成如下：长{宽度：300像素高度：100 px位置：相对；背景色：红色；余量：50px自动0;} 重新定位下三角箭头：箭头{位置：绝对宽度：70 px高度：60 px左侧：-70px；bottom:10px}元素相邻的两边边框样式值设为固体（显示),另两边设为透明（不会显示).箭头* { position : absoluteborder-style :灰实体实虚线；字号：0；线高：0;}下面首先我们来模拟一个直角三角形，把一个元素的相邻两边颜色设为相同的值，另外两边颜色设为透明，即可得到一个直角：如下

代码继续加上如下：箭头em {边框颜色：透明# 09F # 09F透明；边框宽度宽度：30px 35px}继续把两个直角三角形重叠在一起就可以得到一个不规则三角形代码如下：箭头跨度{边框宽度宽度：20px 35px边框颜色：透明# FFF # FFF；底部：0;} 到此不规则的图片已经制作完成了！完整代码如下：div class=' longen ' div class=' arrow ' em/em span/span/div我是龙恩我在气泡框内/div。longen { width :300 px高度：100 px位置：相对；背景色：红色；余量：50px自动0;}.箭头{位置：绝对宽度：70 px高度：60 px左侧：-70px；bottom:10px}。箭头* { position : absoluteborder-style :灰实体实虚线；字号：0；线高：0;}.箭头em {边框颜色：透明# 09F # 09F透明；边框宽度宽度：30px 35px}。箭头跨度{边框宽度宽度：20px 35px边框颜色：透明# FFF # FFF；底部：0;}二：除了通过设置元素的边界来模拟小三角之外，还可以用特殊字符来模拟，用特殊字符模拟小三角同样需要用到定位和重叠覆盖，只不过不需要调整边界属性了。先来看一个菱形"" ,它在页面中的代码是"",需要注意的是页面编码需要设置为utf-8，在网页中可以把当作文字处理，可以通过调整字体大小来它的大小、通过颜色来设置它的颜色hTML。代码如下：div class=' longen ' div class=' arrow ' em/em span/span/div我是龙恩我在气泡框内/div先来设置最外层差异的样式，得到一个矩形框：代码如下：长{宽度：300像素高度：100 px位置：相对；border:5px纯红；余量：50px自动0;}

接着定位箭头最外层容器div，便于观察可以先设置一个背景色

代码如下：箭头{位置：绝对宽度：40 px高度：40 pxleft :100 px bottom :-40px；背景# ccc飞越：隐藏；}再对设置样式：arrow * { position : absolutefont-size :40 px；线高：40 px宽度：40 pxfont-family : imsun字体样式：正常；字体粗细：正常；文本对齐：居中；垂直对齐：毫米；}图如下

注意：为了主流浏览器中显示一致，需要清除浏览器的默认字体样式，特别注意这里字体的设置再分别修改em、span标签的字体颜色，并对这两个标签定位：代码如下：arrow em { color : redtop :-15px；}.箭头跨度{ color : # fff top :-21px；}最终效果图还是和上面一样如下

完整代码如下：div class=' longen ' div class=' arrow ' em/em span/span/div我是龙恩我在气泡框内/div .长{宽度：300像素高度：100 px位置：相对；border:5px纯红；余量：50px自动0;}.箭头{位置：绝对宽度：40 px高度：40 pxleft :100 px bottom :-40px；飞越：隐藏；}.arrow * { position : absolutefont-size :40 px；线高：40 px宽度：40 pxfont-family : imsun字体样式：正常；字体粗细：正常；文本对齐：居中；垂直对齐：毫米；}.arrow em { color : redtop :-15px；}.箭头跨度{ color : # fff top :-21px；} 补充：以上方式实现小三角的过程中不可避免的增加了多余的标签，如果不要求所有浏览器中显示一致的话，我们可以利用css3来实现这个小三角div class='longen' css3气泡框/div。longen { width :300 px高度：100 pxborder:5px固体# 09F位置：相对；背景色： # FFF；} .longen:before。longen :后{ content : }；显示：块；边框宽度：20 px位置：绝对；底部：-40px；left :100 pxborder-style :实线虚线；边框-color:#09F透明透明；字号：0；线高：0;} .{底部：-33px后的longen :边框-颜色：#FFF透明透明；}效果和上面一样。本人也是通过谷歌的自己研究下做的演示确实还不错所以就分享出来了如果分析的不清晰请各位大牛多多指教！本人能力暂时有限！