要做一个Bubble气泡提示框,如果用CSS3特性来做很容易,用图片来做也可以,但前者有兼容性问题(好多苦逼们还在用低级浏览器呢,真希望你不是其中一个),后者又不够灵活,用图片做有一个例子可以看看。 那有没有办法弄一个既方便又兼容又友爱的Bubble气泡提示框呢?答案是可以的,而且就用纯CSS来来实现,当然在没出效果之前你有权去怀疑这件事情,但出了效果后,你必须坚定的认识:楼主是老实人,出家人是不打诳语的。其实呢这个方法是我以前收藏在另一个博客中的,现在为了能让更多的朋友方便地使用,就分享到博客园吧。无论你是否用得到,我都感谢你抽空来临幸我这篇文章。 首先我们来定义一组CSS样式,用来描述bubble框的样式,这里分4种情况,箭头分别在上、右、下、左,CSS代码如下: .bubble-box{ 接下来就分别来应用上述样式从而来实现bubble弹出框的效果: <div class="bubble-box arrow-top"> 2、箭头在右方的情况,html代码如下: <div class="bubble-box arrow-right"> 3、箭头在下方的情况,html代码如下: <div class="bubble-box arrow-bottom"> 4、箭头在左方的情况,html代码如下: <div class="bubble-box arrow-left"> 我的问题网 www. 有关于网站的东西欢迎大家一起交流! 标签: CSS3 |
|
来自: CevenCheng > 《CSS 酷样式》