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判断的技巧,为 ...
随机推荐
- Java常用的排序查找算法
public static void main(String[] args) { // bubbleSort(); // int[] a = {20,2,10,8,12,17,4,25,11 ...
- 掌握Spark机器学习库-07.14-保序回归算法实现房价预测
数据集 house.csv 数据集概览 代码 package org.apache.spark.examples.examplesforml import org.apache.spark.ml.cl ...
- asp.net 实现treeview 选中父节点其子节点也选种中 选中子节点其父节点与根节点也被选中
1.在 Page_Load(object sender, EventArgs e) 里面加入: TreeView1.Attributes.Add("onclick", " ...
- centos7.2密码在单用户下面的修改
centos7.2在但用户模式下面的修改 1.开机启动 2.grub模式按E健 3.Linux16行的"ro"修改为 "rw init=/sysroot/bin/sh&q ...
- vuec常用插件
1. 实现下拉刷新和下拉加载效果 iscroll-probe.js 2.手势密码插件 patternLock.js 3.实现复制 clipboard.min.js
- ArrayList中removeAll和clear的区别(无区别)
removeAll会直接调用此方法,传入list和false,因中间的逻辑都不会走(如果由retainAll方法调用,则会走这些逻辑判断),所以只需要看finaly中的最后一个if条件,w=0,通过循 ...
- NOIP专题复习3 图论-强连通分量
目录 一.知识概述 二.典型例题 1.[HAOI2006]受欢迎的牛 2.校园网络[[USACO]Network of Schools加强版] 三.算法分析 (一)Tarjan算法 (二)解决问题 四 ...
- mySQL--找出各科最高成绩
//找出各科最高成绩create table gradeMax(id int primary key auto_increment,name varchar(20),subject varchar(2 ...
- 零基础入门学习Python（15）--格式化
前言 上节课我们介绍了字符串N多种奇葩方法的用法,但是我们唯独漏掉了format方法,那为何不把format方法和上节课的内容一起讲呢? 因为小甲鱼觉得format方法,跟今天的主题是如出一辙的,都是 ...
- UVA 1589 象棋
题意: 给出一个黑方的将, 然后 红方有 2 ~ 7 个棋子, 给出摆放位置,问是否已经把黑将将死, 红方已经将军. 分析: 分情况处理, 车 马 炮, 红将情况跟车是一样的. 建一个数组board保 ...