因为CSS3尚未形成标准,所以现行的浏览器对于css3支持不太一致,某些特性需要加上浏览器前缀

css属性的浏览器前缀
前缀 渲染引擎 使用该引擎的浏览器
-khtml- KHTML Konqueror
-ms- Trident Internet Explorer
-moz- Mozilla firefox
-o-* Presto opera  opera mobile
-webkit- WebKit safari   chrome   android浏览器

没有添加css3样式之前原始页面如下:

1.第一步,实现圆角效果,在css之前实现圆角效果比较麻烦,但是css3中通过border-radius可以很容易实现圆角效果

  1. .radius{
  2. -webkit-border-radius:10px;
  3. -moz-border-radius:10px;
  4. <span>  </span>border-radius:10px;
  5. }

添加之后效果如图,border-radius:x/y,如果x和y不相同,x表示横轴,y表示纵轴,如果x和y不相同,那么绘制的为椭圆形。

可以通过设置border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius分别设置边框四个角的弧度。

2.第二步,添加气泡的尾巴。

可以通过css来实现一个三角形充当气泡的尾巴,将容器的宽度以及高度设置为0,然后给盒容器设置一个较粗的边框,浏览器会在边框的交界处绘制结合线

  1. .triangle{
  2. height:0px;
  3. width:0px;
  4. border-width:20px;
  5. border-style:solid;
  6. border-color:green black blue red;
  7. }

绘制出的图形如下:

通过将另外三条边设置为透明的,即可得到一个三角形

  1. .triangle{
  2. height:0px;
  3. width:0px;
  4. border-width:20px;
  5. border-style:solid;
  6. border-color:green transparent transparent transparent;
  7. }

为了减少不必须要的html元素,我们通过伪属性来给对话框添加”尾巴“

  1. .left:before{
  2. position:absolute;
  3. content:"\00a0";
  4. width:0px;
  5. height:0px;
  6. border-width:8px 18px 8px 0;
  7. border-style:solid;
  8. border-color:transparent #A6DADC transparent transparent;
  9. top:15px;
  10. left:-18px;
  11. }
  12. .right:before{
  13. position:absolute;
  14. content:"\00a0";
  15. display:inline-block;
  16. width:0px;
  17. height:0px;
  18. border-width:8px 0px 8px 18px;
  19. border-style:solid;
  20. border-color:transparent transparent transparent #A6DADC;
  21. left:250px;
  22. top:15px;
  23. }

添加样式之后效果如图:

3.第三步,我们继续对输入框进行美化,通过hsla或者rgba实现半透明背景

目前输入框是通过十六进制来设置颜色

background-color:#A6DADC

还可以通过

background-color:rgb(166, 218,220)

background-color:rgba(166, 218,220,1)

background-color:hsl(182, 44%,76%)

background-color:rgba(182, 44%,76%,1)

在rgba模式中,前三个数字表示红,绿,蓝的值,取值范围为0~255,最后一个表示透明度

在hsla模式中,前三个数字分别表示色调(取值范围为0~360),饱和度(0%~100%),和亮度(0%~100%),最后一个参数表示透明度。

设置透明背景后效果图如下:可以看到背景花纹

接下来我们给聊天对话框设置一个背景渐变的效果,使背景框更加立体:

可以将linear-gradient,radial-gradient赋值给任何接受图片的属性

background-image:-moz-linear-gradient(hsla(0,0%,100%, 0.6), hsla(0, 0%, 100%, 0)  30px);

background-image:-webkie-gradient(linear, 0 0, 0 30, from(hsla(0, 0%, 100%, 0.6)), to(hsla(0, 0%, 100%, 0)));

效果图:

接下来我们给对话框添加阴影,使其有立体的效果:

box-shadow属性可以给盒容器添加阴影效果,我们需要设置阴影相对盒容器水平以及垂直方向上的偏移,阴影的颜色以及模糊半径和扩展半径

  1. -moz-box-shadow:1px 1px 2px hsla(0, 0%, 0%, 0.3);
  2. -webkit-box-shadow:1px 1px 2px hsla(0, 0%, 0%, 0.3);
  3. box-shadow:1px 1px 2px hsla(0, 0%, 0%, 0.3);

效果图如下:对话框外围有一层阴影,看起来更加立体,第一个1px表示阴影相对盒容器右移1px,第二个1px表示将阴影相对盒容器下移1px,可以设置为负数像相反的方向偏移。2px表示模糊半径,该值越大越模糊,越小边缘越锐利。

继续给其添加特效,当鼠标移动到对话框的时候,改变对话框的位置以及阴影的大小,仿佛气泡弹出来一样

  1. .talk:hover{
  2. top:-2px;
  3. left:-2px;
  4. -moz-box-shadow:3px 3px 2px hsla(0, 0%, 0%, 0.3);
  5. -webkit-box-shadow:3px 3px 2px hsla(0, 0%, 0%, 0.3);
  6. box-shadow:3px 3px 2x hsla(0, 0%, 0%, 0.3);
  7. }

css3实现气泡效果的聊天框的更多相关文章

  1. CSS3实现气泡效果

    首先定义一个 <p class="speech"></p> 先给外层的容器添加样式: p.speech { position: relative; widt ...

  2. CSS3圆角气泡框,评论对话框

    <title>CSS3圆角气泡框,评论对话框</title> <style> body { ; ; font:1em/1.4 Cambria, Georgia, s ...

  3. 不用图片,纯Css3实现超酷的类似iphone的玻璃气泡效果

    最近在一个私活做手机项目时候,需要实现一个类似ios 6中短信那样的气泡效果. 这里分享下实现心得,希望能给大家一点启发. 首先分析下iphone的气泡效果有一下特点 1. 四面圆角 2. 界面上向下 ...

  4. JQuery+CSS3实现封装弹出登录框效果

    原文:JQuery+CSS3实现封装弹出登录框效果 上次发了一篇使用Javascript来实现弹出层的效果,这次刚好用了JQuery来实现,所以顺便记录一下: 因为这次使用了Bootstrap来做一个 ...

  5. HTML5实现微信聊天气泡效果

    最近做一个HybridApp,前端有一个群聊的功能,于是就想模仿微信的聊天界面,先看效果图: HTML代码: <!DOCTYPE html> <html lang="en& ...

  6. 超炫HTML5 SVG聊天框拖拽弹性摇摆动画特效

    这是一款很有创意的HTML5 SVG聊天框拖拽弹性摇摆动画特效. 用户能够用鼠标点击或用手滑动聊天框上的指定区域,该区域会以很有弹性的弹簧效果拉开聊天用户列表.点击一个用户头像后.又以同样的弹性特效切 ...

  7. Android实现三角形气泡效果方式汇总

    在开发过程中,我们可能会经常遇到这样的需求样式: 这张图是截取京东消息通知的弹出框,我们可以看到右上方有个三角形的气泡效果,这只是其中一种,三角形的方向还可以是上.下.左.右. 通过截图可以发现,气泡 ...

  8. 【转】关于FLASH中图文混排聊天框的小结

    原文链接 图文混排也是FLASH里一个很古老的话题了,我们不像美国佬那样游戏里面聊天框就是聊天框,全是文字干干净净,也不像日本人发明了并且频繁地使用颜文字.不管是做论坛.做游戏,必定要实现的一点就是带 ...

  9. UWP开发之控件:用WebView做聊天框

    目录 说明 WebView存在的价值 使用WebView的几个重要技巧 使用WebView做的聊天框 说明 大家都知道,无论是之前的Winform.WPF还是现在的IOS.Android开发中,都存在 ...

随机推荐

  1. Jquery EasyUI Tree树形结构的Java实现(实体转换VO)

    前一阵做的OA项目,有一个是组织架构的树,因为是分开做的,我做的是Controller和页面,其他组做的Service和Dao,因为之前一直没有商量页面用什么框架做比较好,导致,Dao层取出来的数据都 ...

  2. chrome浏览器Uncaught TypeError: object is not a function问题解决

    今天测试多浏览器的时候,chrome浏览器出现Uncaught TypeError: object is not a function: 解决办法:(不知道为啥子)改一下js的方法名字就可以了

  3. C++11_新语法

    版权声明:本文为博主原创文章,未经博主允许不得转载. 本节主要介绍C++的新特性,对于C++的基础语法不再讲解.由于编译器的不同.在某些地方可能有些差异,但是无太大影响. 讲解本节知识之前先确认你的C ...

  4. 3PC

    3PC,是Three-Phase Commit的缩写,即三阶段提交,是2PC的改进版,其二阶段提交协议的"提交事务请求"过程一分为二,形成了由CanCommit,PreCommit ...

  5. 查看PHP以字母"E"开头的常量

    1.E_ALL <?php echo E_ALL; ?> 32767 2.E_COMPILE_ERROR <?php echo E_COMPILE_ERROR; ?> 64 3 ...

  6. 浅谈深度学习中的激活函数 - The Activation Function in Deep Learning

    原文地址:http://www.cnblogs.com/rgvb178/p/6055213.html版权声明:本文为博主原创文章,未经博主允许不得转载. 激活函数的作用 首先,激活函数不是真的要去激活 ...

  7. 为什么Android无法设置无标题栏?

    首先我用的是Android Studio开发,但几乎试过了所有的方法,都无法设置无标题栏,最后改了一下style才解决 要在parent的值里面要加Base.····· 然后问题就解决了,这样所有的标 ...

  8. Linux RTC Test Example rtctest.c hacking

    /********************************************************************** * Linux RTC Test Example rtc ...

  9. 【剑指offer】09-3变态跳台阶

    原创博文,转载请注明出处! # 本文是牛客网<剑指offer>刷题笔记,笔记索引连接 1.题目 # 一只青蛙一次可以跳上1级台阶,也可以跳上2级……它也可以跳上n级.求该青蛙跳上一个n级的 ...

  10. with异常

    with 语句 语法: with 表达式1 [as 变量1], 表达式2 [as 变量2], ...: 语句块 作用: 使用于对资源进行访问的场合,确保使用过程中不管是否发生异常都会执行必要的'清理操 ...