首页风格
门户
博客

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

日期:2012-4-11  来源:GBin1.com

分享一个纯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;
}

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

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

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com


  1. http://mming.sinaapp

    支持一个。(*^__^*) 嘻嘻
    2012-4-15 上午10:01
今日推荐