浏览 3204 次
锁定老帖子 主题:分享一个纯CSS开发的气泡式提示框
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2012-04-12
日期:2012-4-11 来源:GBin1.com 作为前端开发人员,我们都熟悉使用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; } 最后我们定义提示框的箭头方向: .... .... 原文来自:分享一个纯CSS开发的气泡式提示框 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2012-05-07
浏览器全兼容还是怎么地?
|
|
返回顶楼 | |