本文为  机构官方  教程，主要介绍： —— 纯CSS开发的气泡式提示框

 作为前端开发人员，我们都熟悉使用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; }复制代码 最后我们定义提示框的箭头方向： .tip-bubble-top:after {   border-bottom-color: #202020;   left: 50%;   bottom: 100%;   margin-left: -15px; }