日期：2012-4-11  来源：

作为前端开发人员，我们都熟悉使用CSS来生成页面上丰富的样式，对于边框border属性来说，也是我们最熟悉不过的CSS属性，今天我们这里将介绍如何使用纯CSS来生成一个气泡式样的提示框，希望大家喜欢！

在这篇文章中我们将使用:after伪标签来生成提示框的指示箭头。

首先我们定义提示框相关属性，我们添加了box阴影和文字阴影效果，这样让提示框更加漂亮：

/* bubble */.tip-bubble {  position: relative;  background-color: #202020;  width: 100px;  padding: 20px;  color: #CCC;  text-align: center;  border-radius: 10px;  margin: 50px;  border: 1px solid #111;  box-shadow: 1px 1px 2px #202020;  -moz-box-shadow: 1px 1px 2px #202020;  -webkit-border-shadow: 1px 1px 2px #202020;  text-shadow: 0px 0px 15px #fff;}

接下来我们处理:after伪标签：

.tip-bubble:after {  content: '';  position: absolute;  width: 0;  height: 0;  border: 15px solid;}

...

...

原文来自: