css模拟气泡对话框

最新推荐文章于 2023-06-08 16:52:44 发布

波克比520

最新推荐文章于 2023-06-08 16:52:44 发布

阅读量1.1k

点赞数

分类专栏： html5+css3 文章标签： css气泡提示框

本文链接：https://blog.csdn.net/u011175410/article/details/27796579

版权

html5+css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

css部分：

body ,p{ padding:0; margin:0;}
body{ font-size:12px; padding:20px 50px; margin:0 auto;}
.bubble{
  font-size:14px;
  position: relative;
  width: 130px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background:white;
  border: 2px solid #CCC;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.bubble:before{
 content: ' ';
 position: absolute;
 width: 0; height: 0;
 left: 40px;
 top: 40px;
 border: 15px solid;
 /*border-color: #309 green red yellow;*/
 border-color: #CCC transparent transparent #CCC;
}
.bubble:after { 
  content: ' '; 
  position: absolute; 
  width: 0; 
  height: 0; 
  left: 42px; 
  top: 40px;  
  border: 13px solid; 
  border-color: #fff transparent transparent #fff; 
}

html部分：

<p class="bubble">气泡提示框</p>

预览效果：

说明：:before和:after伪类都是用来和 content 属性一起使用，设置在对象前(或后)发生的内容。实现的原理是，在内容开始前，创建一个小三角形背景，在内容结束后创建一个略小的白色小三角形覆盖在上边而形成这种效果。另外ie7以下不支持伪类（:before、:after）,ie8以下浏览器不支持圆角边框。