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判断的技巧,为 ...
随机推荐
- shell脚本的练习
创建一个以.sh结束的文件. 规则: 文件的头部使用#!/bin/sh 开头 这个是一个标识的作用,告诉使用哪种脚本来执行 echo 用来向命令行来输出的东西
- Jmeter重要组件介绍（一）
一.常用的取样器 二.常用的逻辑控制器 三.前置处理器 四.后置处理器 五.断言 六.定时器 七.配置元件 八.监听器
- SqlServer2012学习 - 基本数据类型认知
精确数字: 1.整数 int是Sql Server主要整数类型.tinyint,smallint,int 不会自动转成bigint. 大于 2,147,483,647 的整数常量将转换为 decima ...
- list.extend的结果是None
执行list.exend()方法后,会直接修改list本身,而不会产生返回值 In [97]: d=(43,) In [98]: type(d) Out[98]: tuple In [99]: c O ...
- BZOJ4832: [Lydsy1704月赛]抵制克苏恩 (记忆化搜索 + 概率DP)
题意:模拟克苏恩打奴隶战对对方英雄所造成的伤害 题解:因为昨(今)天才写过记忆化搜索 所以这个就是送经验了 1A还冲了个榜 但是我惊奇的发现我数组明明就比数据范围开小了啊??? #include &l ...
- jQuery动态移除和绑定事件
function bindEvent() { //移除绑定事件 $('.btnsp').unbind('click'); //绑定事件 $('.btnsp').bind('click', functi ...
- VMWare NAT网络配置
1. 打开CMD,输入以下命令 ipconfig -all 2. 设置主机Wi-Fi网络对VMnet8虚拟网卡的网络共享 3. 虚拟机NAT模式配置 4. 配置虚拟机网卡信息 切换到ROOT cd / ...
- php扩展1：filp/whoops（用于调试，方便定位错误点）
一.composer下载filp/whoops: 1.在composer.json中添加:"filp/whoops": "*",如下所示: 2.执行compos ...
- Python之游戏开发-飞机大战
Python之游戏开发-飞机大战 想要代码文件,可以加我微信:nickchen121 #!/usr/bin/env python # coding: utf-8 import pygame impor ...
- Python之协程函数
Python之协程函数 什么是协程函数:如果一个函数内部yield的使用方法是表达式形式的话,如x=yield,那么该函数成为协程函数. def eater(name): print('%s star ...