[css] 使用css实现气泡框的效果
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.longen{
width:300px;
height:100px;
border:5px solid #09F;
position:relative;
background-color:#FFF;
}
.longen:before,.longen:after{
content:"";display:block;
border-width:20px;
position:absolute; bottom:-40px;
left:100px;
border-style:solid dashed dashed;
border-color:#09F transparent transparent;
font-size:0;
line-height:0;
}
.longen:after{
bottom:-33px;
border-color:#FFF transparent transparent;
}
</style>
</head>
<body>
<div class="longen">
css3气泡框
</div></body>
</html>
个人简介
我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论
主目录
与歌谣一起通关前端面试题
![[css] 如何使用伪元素实现增大点击热区来增加用户体验？](http://pic.xiahunao.cn/[css] 如何使用伪元素实现增大点击热区来增加用户体验？)
![[css] 如何使用css显示a链接的url？](http://pic.xiahunao.cn/[css] 如何使用css显示a链接的url？)
![[css] css中的url()要不要加引号？说说你的理解](http://pic.xiahunao.cn/[css] css中的url()要不要加引号？说说你的理解)
![[css] 使用css写一个垂直翻转图片的效果](http://pic.xiahunao.cn/[css] 使用css写一个垂直翻转图片的效果)
![[css] 请写出font属性的快捷写法](http://pic.xiahunao.cn/[css] 请写出font属性的快捷写法)
![[css] 举例说明与打印有关的属性有哪些？](http://pic.xiahunao.cn/[css] 举例说明与打印有关的属性有哪些？)
![[css] 如何让背景图片固定不随滚动条滚动](http://pic.xiahunao.cn/[css] 如何让背景图片固定不随滚动条滚动)
![[css] 你用过css的tab-size属性吗？浏览器默认显示tab为几个空格？](http://pic.xiahunao.cn/[css] 你用过css的tab-size属性吗？浏览器默认显示tab为几个空格？)
