CSS聊天气泡
概述
谷歌效果图如下：
ie效果图如下：
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk" />
<title>test</title>
<style>
/**容器样式**/
.container{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
//min-width:200px;
min-height:300px;
border-radius:5px;
border:1px solid #E0E0E0;
-webkit-box-shadow: #E0E0E0 0px 0px 10px inset;
-moz-box-shadow: #E0E0E0 0px 0px 10px inset;
box-shadow: #E0E0E0 0px 0px 10px inset;
overflow-y:scroll;
word-wrap: break-word;
word-break: break-all;
}
/**谷歌滚动条样式修改**/
.webkit-scroll::-webkit-scrollbar {
width: 10px;
}
.webkit-scroll::-webkit-scrollbar-track {/* 滚动条的滑轨背景颜色 */
background-color:#ffffff;
box-shadow: inset 0 0 5px rgba(0,0,0,.3);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius:5px;
}
.webkit-scroll::-webkit-scrollbar-thumb {/* 滑块颜色 */
background-color:#bbb;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius:5px;
}
.webkit-scroll::-webkit-scrollbar-thumb:hover {/* 滑块hover的颜色 */
background-color:#5ABFDD;
}
.webkit-scroll::-webkit-scrollbar-button {/* 滑轨两头的监听按钮颜色 */
//background-color:#5ABFDD;
} .webkit-scroll::-webkit-scrollbar-corner {/* 横向滚动条和纵向滚动条相交处尖角的颜色 */
//background-color: #ffffff;
}
/**ie滚动条样式修改**/
.ie-scroll{
scrollbar-face-color:#5ABFDD;
scrollbar-shadow-color:#5ABFDD;
scrollbar-highlight-color:#5ABFDD;
scrollbar-3dlight-color:#5ABFDD;
scrollbar-darkshadow-color:#5ABFDD;
scrollbar-track-color:#ffffff;
scrollbar-arrow-color:#EFAD4D;
}
/**气泡样式**/
.pop{
//background:yellow;
display:inline-block;
margin-top:10px;
margin-left:10px;
margin-right:10px;
width:90%;
}
.pop-img{
width:40px;
height:40px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius:20px;
display:inline-block;
color:white;
font-family:12px;
line-height:41px;//垂直居中
}
.pop-left,.pop-right{
//background:pink;
max-width:50%;
position:relative;
border:1px solid black;
margin-left:10px;
margin-right:10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius:3px;
display:inline-block; //宽度随内容适应
}
.pop-left:before{
content:"";
position:absolute;
right:100%;
top:10px;
border-top:6px solid transparent;
border-right:6px solid black;
border-bottom:6px solid transparent;
}
.pop-right:after{
content:"";
position:absolute;
left:100%;
top:10px;
border-top:6px solid transparent;
border-left:6px solid black;
border-bottom:6px solid transparent;
}
.pop-text{
background:black;
color:white;
padding:10px;
}
.ff{float:left;}
.fr{float:right;}
.pop-br{/**换行div**/
//background:blue;
height: 1px;
width:100%;
}
.time{font-size:12px;}
</style>
</head>
<body>
<div class="container webkit-scroll ie-scroll"> <div class="pop ff ">
<div class="pop-img ff" style="background:rgba(100,200,150,.8)"><center>迢迢</center></div>
<div class="pop-left ff">
<div class="pop-text"><span class="time">2018-03-08 12:02:46</span><br>测试内容测试内容测试内容测试内容测试内容测试内测试内容测试内测试内容测试内测试内容测试内测试内容测试内测试内容测试内</div>
</div>
</div><div class="pop-br"/> <div class="pop fr">
<div class="pop-img fr" style="background:rgba(250,10,50,.9)"><center>西悉</center></div>
<div class="pop-right fr">
<div class="pop-text"><span class="time">2018-03-08 12:03:10</span><br>测试内容测试内容测试内容测试内容</div>
</div>
</div><div class="pop-br"/> <div class="pop ff ">
<div class="pop-img ff" style="background:rgba(100,200,150,.8)"><center>迢迢</center></div>
<div class="pop-left ff">
<div class="pop-text"><span class="time">2018-03-08 12:04:01</span><br>测试内容</div>
</div>
</div><div class="pop-br"/> <div class="pop fr">
<div class="pop-img fr" style="background:rgba(250,10,50,.9)"><center>西悉</center></div>
<div class="pop-right fr">
<div class="pop-text"><span class="time">2018-03-08 12:04:50</span><br>测试</div>
</div>
</div><div class="pop-br"/> </div>
</body>
</html>
CSS聊天气泡的更多相关文章
- css聊天气泡样式
https://files.cnblogs.com/files/zonglonglong/%E8%81%8A%E5%A4%A9%E6%B0%94%E6%B3%A1.zip
- css实现聊天气泡效果
--------------------------------------- css功能强大,能实现很多炫 酷的效果,今天给大家分享 用css3绘制聊天气泡的方法: -------------- ...
- HTML5实现微信聊天气泡效果
最近做一个HybridApp,前端有一个群聊的功能,于是就想模仿微信的聊天界面,先看效果图: HTML代码: <!DOCTYPE html> <html lang="en& ...
- 【HTML5】实现QQ聊天气泡效果
今天自己用 HTML/CSS 做了个类似QQ的聊天气泡,以下是效果图: 以下说下关键地方的样式设置.然后贴出html和css代码(不多). 步骤1:布局 消息採用div+float布局,每条消息用一个 ...
- winform实现QQ聊天气泡200行代码
c# winform实现QQ聊天气泡界面,原理非常简单,通过webKitBrowser(第三方浏览器控件,因为自带的兼容性差)加载html代码实现,聊天界面是一个纯HTML的代码,与QQ的聊天界面可以 ...
- QQ聊天气泡（图片拉伸不变样）、内容尺寸定制（高度随字数、字体而变）
- (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor whiteColor]; /** QQ聊 ...
- Unity UGUI图文混排源码(四) -- 聊天气泡
这里有同学建议在做聊天气泡时,可以更改为一张图集对应多个Text,这样能节省资源,不过我突然想到每个Text一个图集,可以随时更换图集,这样表情图更丰富一些,于是我就先将现有的聊天demo改为了聊天气 ...
- 纯CSS箭头,气泡
原文地址: CSS Triangles 演示地址:CSS Triangles Demo 原文日期: 2013年8月5日 翻译日期: 2013年8月9日 本文两种实现方式: 使用或不使用 before ...
- （二十一）即时通信的聊天气泡的实现II
一些优化: 禁止TableView的点击: self.tableView.allowsSelection = NO; 合并相同的时间: 不需要显示的时间,只要不设置尺寸就行了. 一个if判断的技巧,为 ...
随机推荐
- Bootstrap modal使用及点击外部不消失的解决方法
这篇文章主要为大家详细介绍了Bootstrap modal使用及点击外部不消失的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了Bootstrap modal使用及点击 ...
- （转）淘淘商城系列——使用maven tomcat插件启动web工程
http://blog.csdn.net/yerenyuan_pku/article/details/72672138 上文我们一起学习了怎样搭建maven工程,这篇文章我就来教大家一起学习怎样用to ...
- (转）淘淘商城系列——分布式文件系统FastDFS
http://blog.csdn.net/yerenyuan_pku/article/details/72801777 商品添加的实现,包括商品的类目选择,即商品属于哪个分类?还包括图片上传,对于图片 ...
- leetcode_654. Maximum Binary Tree
https://leetcode.com/problems/maximum-binary-tree/ 给定数组A,假设A[i]为数组最大值,创建根节点将其值赋为A[i],然后递归地用A[0,i-1]创 ...
- laravel模块 目录设计
- call, apply, bind 区别
#call, apply, bind 区别及模拟实现call apply bind 三者都可以用来改变this的指向,但是在用法上略有不同 首先说一下call和apply的区别 call和apply ...
- viewer && ImageFlow 图片滚动组件 图片点击放大 可以滚轮放大缩小 viewer
ImageFlow https://finnrudolph.com/products/imageflow https://github.com/countzero/ImageFlow http://w ...
- Git中文书籍
Git中文书籍: http://git-scm.com/book/zh/v1
- 解决java web项目导入后出现的问题 ---cannot be read or is not a valid ZIP file
导入以前的web项目后会出现以下三个错误: 1. Archive for required library: ‘WebContent/WEB-INF/lib/readme.txt’ in projec ...
- python3+beautifulSoup4.6抓取某网站小说（三）网页分析，BeautifulSoup解析
本章学习内容:将网站上的小说都爬下来,存储到本地. 目标网站:www.cuiweijuxs.com 分析页面,发现一共4步:从主页进入分版打开分页列表.打开分页下所有链接.打开作品页面.打开单章内容. ...