⽓泡提⽰效果css.html,⽤纯CSS3绘制⾼端简约的⽓泡提⽰框⽤纯css绘制⼀个简单的⽓泡提⽰框，对于长期关注课课家CSS3绘图教程的朋友来说是件轻⽽易举的事，但是程序员最不喜欢做的事情是重复造轮⼦，加上之前⼩编分享的⼏个⽓泡要么过于复杂，通⽤性不强，要么需要⿏标移上才显⽰，移植也不⽅便。所以今天⼩编来整理⼀份更纯粹的⽓泡提⽰框代码。
⽓泡提⽰由⼀个圆⾓矩形和⼀个三⾓形组成，其中三⾓形可以利⽤before或after伪元素来插⼊。那么，每个提⽰框在html⾥⾯都只需要⼀个元素了。
我们来看看基础的html代码:
可见每个⽓泡都只⽤了⼀个div元素，三⾓形箭头部分我们⽤before伪元素即可。
四个⽓泡的样式⾮常接近，不同的只是三⾓形的位置，为此我们可以定义公共的部分。但是这⾥没有共⽤的类名啊，那该怎么弄呢？
我们发现这4个类都以tip-bubble开头，⽽CSS提供了⼀个属性选择器，可以让我们进⾏模糊匹配。
要实现匹配开头等于固定内容的选择器，我们可以这样写。
[class^=tip-bubble]
其中^=代表匹配开头，具体内容为tip-bubble。
下⾯我们就来为这个选择器定义⼀些公共的样式。⾸先，三⾓形和圆⾓矩形从某种意义上说是重合的，因此内部元素(包括伪元素)要使⽤绝对定位。所以整个div要设置为相对定位，让内部元素的位置以div的左上⾓作为参考点。然后再设置圆⾓半径、背景颜⾊、边距、宽⾼、字体等公共样式。
[class^=tip-bubble]{
display:inline-block;
position:relative;
background-color:#202020;
width:120px;
padding:20px;
color:#CCC;
text-align:center;
font-size:14px;
font-family：微软雅⿊;
border-radius:10px;
margin:50px;
}
运⾏效果如下图所⽰:
感觉少了点层次感，我们⽤CSS3的box-shadow属性给⽓泡加个投影看看。
当然了，提⽰框的⽴体感不宜太强，所以跟原始图形错开1个像素就⾜够了。
[class^=tip-bubble]{
/*其它样式代码省略*/
box-shadow:1px 1px 2px #202020;
-o-box-shadow:1px 1px 2px #202020;
-moz-box-shadow:1px 1px 2px #202020;
-webkit-border-shadow:1px 1px 2px #202020;
}
4⾏代码功能⼀致，不同前缀⽤于兼容不同的浏览器。
以第⼀⾏为例，1px 1px 2px #202020代表的是⽔平和垂直⽅向都错开1像素，⼤⼩为2像素的深灰⾊(#202020)阴影。4个属性⽤英⽂空格分隔，分别代表x⽅向偏移，y⽅向偏移，阴影⼤⼩和阴影颜⾊。
运⾏效果如下图所⽰:
现在层次感好多了，我们⽤before伪元素加⼊三⾓形箭头看看。
有关注本站《CSS3基本形状汇总》的朋友对三⾓形的绘制应该不陌⽣，⽅法是利⽤边框的转⾓实现，只要边框设置得⾜够粗，那么转⾓部分就⾜以让我们完成三⾓形的绘制了。
本案例不再详解三⾓形的实现原理，不过⼤家要是忘了的话，就可以重温下⾯的原理图。
4个⽓泡都是绘制三⾓形，不同的只是位置和⾓度的区别。所以绘制三⾓形的部分仍然可以作为公共样式定义到[class^=tip-bubble]的before伪元素中。然后，我们也该⽤绝对定位了。
[class^=tip-bubble]:before{
content:'';
position:absolute;
width:0;
height:0;
border:15px solid;
}
因为只⽤到边框，所以width和height都设置为0。
运⾏效果如下图所⽰:
伪元素把⽓泡提⽰给“挖空”了(实际上是⽂字颜⾊)。因为width和height都等于0，所以被挖空的部分实际上都是由边框构成的，结构如下图所⽰，不难发现它就是4个三⾓形。
现在我们要为⽓泡提⽰补上三⾓形。以左箭头为例，我们要取的是右边框，所以我们给右边框(border-right)设置跟⽓泡背景⼀样的颜⾊。
这次我们就写在tip-bubble-left类上了。
.
tip-bubble-left:before{
border-right-color:#202020;
}
运⾏效果如下图所⽰:
现在我们要把箭头移到提⽰框的左侧，但不难想象，如果背景颜⾊跟字体颜⾊不⼀致，那移到左边以后就⼀定会显⽰出⼀个被切掉⼀个⾓的⼩⾊块，所以我们应该先让before伪元素的字体颜⾊变成全透
明。你可以使⽤CSS3的rgba颜⾊，但更地道的做法，是使⽤transparent。4个提⽰框都应该应⽤该效果，所以这次我们写回到公共的部分。
[class^=tip-bubble]:before{
/*其它样式代码省略*/
color:transparent;
}
运⾏效果如下图所⽰:
这下真的只剩下⼀个三⾓形了，另外3个边框已经不可见。
我们把箭头移到左侧，这时候⽤绝对定位将会很⽅便。只要让left等于伪元素宽度的相反数就可以了。
伪元素的宽度等于左边框粗细+右边框粗细，即30像素。
.tip-bubble-left:before{
border-right-color:#202020;
left:-30px;
}
运⾏效果如下图所⽰:
现在我们要让箭头垂直居中，但是⽓泡的⾼度会随着⽂本⾼度的变化⽽改变。所以我们改⽤百分⽐看看，居中⾃然就是50%了。
.tip-bubble-left:before{
/*其它样式代码省略*/css特效文字
top:50%;
}
运⾏效果如下图所⽰:
还是没有居中啊。对的，因为定位的参考点是左上⾓，所以现在是三⾓形的上顶点对齐到⽓泡的中⼼。所以正确的做法是50%-15px(伪元素宽度的⼀半)。然⽽CSS3不⽀持这种写法，但⽤javaScript来实现⼜有点杀鸡⽤⽜⼑的感觉，所以我们不妨⽤其它可以控制位置的属性来处理，⽐如CSS3的transform，或者早期CSS就⽀持的margin-top。这⾥我们使⽤后者。
.tip-bubble-left:before{

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。