分享一个纯CSS开发的气泡式提示框

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

Demo下载：

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

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

1. /* bubble */
   
2. .tip-bubble {
   
3.   position: relative;
   
4.   background-color: #202020;
   
5.   width: 100px;
   
6.   padding: 20px;
   
7.   color: #CCC;
   
8.   text-align: center;
   
9.   border-radius: 10px;
   
10.   margin: 50px;
    
11.   border: 1px solid #111;
    
12.   box-shadow: 1px 1px 2px #202020;
    
13.   -moz-box-shadow: 1px 1px 2px #202020;
    
14.   -webkit-border-shadow: 1px 1px 2px #202020;
    
15.   text-shadow: 0px 0px 15px #fff;
    
16. }

复制代码
接下来我们处理:after伪标签：

1. .tip-bubble:after {
   
2.   content: '';
   
3.   position: absolute;
   
4.   width: 0;
   
5.   height: 0;
   
6.   border: 15px solid;
   
7. }

复制代码
最后我们定义提示框的箭头方向：

1. .tip-bubble-top:after {
   
2.   border-bottom-color: #202020;
   
3.   left: 50%;
   
4.   bottom: 100%;
   
5.   margin-left: -15px;
   
6. }

复制代码
以上定义了顶端的箭头方向，其它的代码类似。是不是很简单，希望大家喜欢！

【分享一个纯CSS开发的气泡式提示框】相关文章

1. 分享一个纯CSS开发的气泡式提示框

2. CSS3菜单气泡提示

3. CSS3实现Tooltip提示框飞入飞出动画

4. 类似 Google Tips 页面的卡片式提示和翻转特效

5. Prompt轻量级提示框弹出层Jquery插件

6. Prompt轻量级提示框弹出层Jquery插件

7. jQuery消息提示框插件Tipso

8. Elycharts是一个纯JavaScript解决方案

9. 分享一组很赞的 jQuery 特效【附源码下载】

10. 分享一款页面视差滚动切换jquery.localscroll插件

本文来源：https://www.51html5.com/a877.html