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判断的技巧,为 ...
随机推荐
- CentOS7 Install Shipyard
# 采集木jj 原文:http://www.cnblogs.com/caoguo/p/5735189.html # CentOS7 Install Shipyard# yum install dock ...
- Swift3命名空间的实现
最近在看一些Swift开源库的时候,发现了一些优秀的开源库都使用了命名空间,例如Kingfisher这个开源库中,就针对UIImage,UIImageView,UIButton做了命名空间的扩展.通过 ...
- chpasswd - 成批更新用户的口令
总览 chpasswd [-e] 描述 chpasswd 从系统的标准输入读入用户的名称和口令,并利用这些信息来更新系统上已存在的用户的口令.在没有用 -e 这个开关选项的情况下,口令将按明文的形式接 ...
- bdflush - 将dirty缓存写回到磁盘的核心守护进程
总览(SYNOPSIS) bdflush [opt] 描述(DESCRIPTION) bdflush 被用来启动核心守护进程将内存中的dirty缓存写到磁盘上.真正清洁工作是一个核心程序完成的. bd ...
- samba的安装及其使用
参考pdf文档:https://pan.baidu.com/s/1iPJ1iPtNx7ZXNHRurrjfqw centos7 samba配置#centos7安装Sambayum -y install ...
- S-HR之导入模板指向实现类配置
SELECT * FROM t_bs_basefileimpmap where FENTITYNAME='com.kingdee.eas.hr.affair.app.ResignBizBillEntr ...
- python 弹窗
import ctypes message = ctypes.windll.user32.MessageBoxA(0,'message','tips',0)
- 关于C/C++的一些思考（4）
C++的类型转换规则: 对于数值类型而言:当一个较小数值类型赋值给一个较大数值类型的时候,C++支持隐式的类型转换,不会有任何的损失: 对于数值类型而言,当一个较大数值类型赋值给一个较小数值类型时候, ...
- leds-gpio driver 续1
在上文中分析了gpio-led platform_device是如何定义并注册的. 那么gpio-led platform_device 和 gpio-led platform_driver是如何匹配 ...
- ubuntu server 12.04.4安装配置
这里讲