用纯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{

　　/*其它样式代码省略*/

　　top:50%;

　　}

　　运行效果如下图所示:

　　还是没有居中啊。对的，因为定位的参考点是左上角，所以现在是三角形的上顶点对齐到气泡的中心。所以正确的做法是50%-15px（伪元素宽度的一半）。然而CSS3不支持这种写法，但用javaScript来实现又有点杀鸡用牛刀的感觉，所以我们不妨用其它可以控制位置的属性来处理，比如CSS3的transform，或者早期CSS就支持的margin-top。这里我们使用后者。

　　.tip-bubble-left:before{

　　/*其它样式代码省略*/

　　margin-top:-15px;

　　}

　　运行效果如下图所示，这回真的居中对齐了:

　　其它三个方向的实现思路跟左箭头一样，小编就不再重复了，只给出最后的代码。

　　.tip-bubble-top:before{

　　border-bottom-color:#202020;

　　left:50%;

　　top:-30px;

　　margin-left:-15px;

　　}

　　.tip-bubble-right:before{

　　border-left-color:#202020;

　　right:-30px;

　　top:50%;

　　margin-top:-15px;

　　}

　　.tip-bubble-bottom:before{

　　border-top-color:#202020;

　　bottom:-30px;

　　left:50%;

　　margin-left:-15px;

　　}

　　现在让我们一起来来看下最终的成果吧！

　　气泡提示框是软件，网页等产品使用频率非常高的元素，高端黑更是目前技术类软件的主流色调，所以本教程的实用价值相当高。HTML元素非常简洁，而CSS代码也完全没有掺杂任何跟提示框无关的样式，移植起来非常方便。另一方面，本文对制作过程每一步的讲解都相当细致，涉及的知识点也不复杂，因此本教程除了为实战的朋友带来便利以外，也非常适合初学者作为实例教程进行学习。