接着前面的学习，对话建立了，下面就写对话框气泡，和微信的差不多那种。尖角对话气泡网上一堆，圆尖角的修改了一个。IE8以下不能用，其他都可以用，直接上html代码，将<style>内容用到你的程序里面就能达到一样的效果，没用js文件，没用图片。强大的CSS3，真的很强大。

html代码

<style>
.Message_Left {
    width: auto;
    height: auto;
    margin-left: 200px;
    max-width:390px;
    min-width:90px;
    display:inline-block;
    *display:inline;
    background-color:#5cacdd;
    color: #fff;
    font-size: 12px;
    font-family: 微软雅黑;
    line-height: 18px;
    padding: 12px 20px 12px 20px;
    box-sizing: border-box;
    border-radius: 25px;
    position: relative;
    word-break: break-all;
}
.Message_Right {
    width: auto;
    height: auto;
    margin-left: 200px;
    max-width:390px;
    min-width:75px;
    display:inline-block;
    *display:inline;
    background-color: #59B859;
    color: #fff;
    font-size: 12px;
    font-family: 微软雅黑;
    line-height: 18px;
    padding: 12px 20px 12px 20px;
    box-sizing: border-box;
    border-radius: 25px;
    position: relative;
    word-break: break-all;
}

.Message_Left:before {
    content:"";
    position:absolute;
    z-index:-;
    bottom:-1px;
    left:-37px;
    height:24px;
    border-right:50px solid #5cacdd;
    background:#5cacdd;
    -webkit-border-bottom-right-radius:90px 5px;
    -moz-border-radius-bottomright:90px 5px;
    border-bottom-right-radius:90px 5px ;
    -webkit-transform:translate(, -2px);
    -moz-transform:translate(, -2px);
    -ms-transform:translate(, -2px);
    -o-transform:translate(, -2px);
    transform:translate(, -2px);
}
.Message_Left:after {
    content:"";
    position:absolute;
    z-index:-;
    bottom:-2px;
    left:-8px;
    width:40px;
    height:25px;
    background:#fff;
    -webkit-border-bottom-right-radius:30px 50px;
    -moz-border-radius-bottomright:30px 50px;
    border-bottom-right-radius:30px 50px;
    -webkit-transform:translate(-30px, -2px);
    -moz-transform:translate(-30px, -2px);
    -ms-transform:translate(-30px, -2px);
    -o-transform:translate(-30px, -2px);
    transform:translate(-30px, -2px);
}

.Message_Right:before {
    content:"";
    position:absolute;
    z-index:-;
    bottom:-1px;
    right:-45px;
    height:31px;
    border-left:60px solid #59B859;
    background:#59B859;
    -webkit-border-bottom-right-radius:80px 50px 0px 0px;
    -moz-border-radius-bottomright:80px 50px;
    border-bottom-left-radius:90px 5px ;
    -webkit-transform:translate(, -2px);
    -moz-transform:translate(, -2px);
    -ms-transform:translate(, -2px);
    -o-transform:translate(, -2px);
    transform:translate(, -2px);
}
.Message_Right:after {
    content:"";
    position:absolute;
    z-index:-;
    bottom:-2px;
    right:-95px;
    width:70px;
    height:32px;
    background:#fff;
    -webkit-border-bottom-right-radius:40px 50px 0px 0px;
    -moz-border-radius-bottomright:40px 50px;
    border-bottom-left-radius:30px 50px;
    -webkit-transform:translate(-30px, -2px);
    -moz-transform:translate(-30px, -2px);
    -ms-transform:translate(-30px, -2px);
    -o-transform:translate(-30px, -2px);
    transform:translate(-30px, -2px);
}

</style>

<body style='background-color:#fff'>
<div class="Message_Left">
风筝飞的很远，线却不在手上，曾今年幼时的梦想就像那风筝，线不在我手上，只是我跟着它跑，却不是我带它飞到任何一个地方。
青春走了、我们大了，那些熙熙攘攘的地方现在成了别人的天堂，有的人怀念旧时的那个地方，就像自己怀念那枯燥的课堂、一样。有的人在憧憬更好的明天，却还在回想旧时的时光。
</div>

<br><br>

<div class="Message_Right">
嗯...
</div>

<br><br>

<div class="Message_Left">
天空之下，我门轻的像羽毛。在那叶落黄昏，被吹向很遥远的地方，很遥远的地方，梦似乎还不曾飞到。
</div>

<br><br>

<div class="Message_Right">
忘记变得越来越胆怯，回忆却越来越忧伤，那样清晰完美。如果没流干眼泪，你怎么知道我的忧伤。伴随的风带来的不仅仅有一丝凉意，还有那一点点的惆怅，让一个仕途迷失原有的方向。
</div>

<br><br>

<div class="Message_Left">
    很遥远的地方，梦似乎还不曾飞到。
</div>

</body>

直接复制粘贴成一个html文件就可以看到效果，不足的就是部分圆角不好设置透明，还得改改。

介绍个强大的css3代码，纯css3做的，动画的背景，看看：http://www.jb51.net/jiaoben/445132.html，演示地址：http://demo.jb51.net/js/2016/CSS3_dcyc/

这个当背景很不错，上面套一个半透明div，效果不错。没用js文件，就3张图片，只有1k大小，会飘动，会变天。

学习还在继续，通过写小程序学到了不少东西，差不多了打个包发上来。

初学c# -- 学习笔记（二）的更多相关文章

  1. 初学c# -- 学习笔记（一）

    初学c# -- 学习笔记(一) 学习C#了,参考许多资料,一步步学习.这一段学习ajax的工作原理,参照其他例子写了web版的群聊小程序,全部文件代码也就不到300行,很简单.使用时先输入用户名,点确 ...

  2. WPF的Binding学习笔记(二)

    原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...

  3. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  4. [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计

    源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...

  5. JMX学习笔记(二)-Notification

    Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...

  6. java之jvm学习笔记二(类装载器的体系结构)

    java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...

  7. Java IO学习笔记二

    Java IO学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...

  8. 《SQL必知必会》学习笔记二)

    <SQL必知必会>学习笔记(二) 咱们接着上一篇的内容继续.这一篇主要回顾子查询,联合查询,复制表这三类内容. 上一部分基本上都是简单的Select查询,即从单个数据库表中检索数据的单条语 ...

  9. NumPy学习笔记 二

    NumPy学习笔记 二 <NumPy学习笔记>系列将记录学习NumPy过程中的动手笔记,前期的参考书是<Python数据分析基础教程 NumPy学习指南>第二版.<数学分 ...

  10. Learning ROS for Robotics Programming Second Edition学习笔记(二) indigo tools

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...

随机推荐

  1. [源码]String StringBuffer StringBudlider（1String部分）

      String     /** The value is used for character storage. */     private final char value[];  /** Th ...

  2. 尚学堂Spring视频教程（六）：AOP Annotation

    此处省略N个字.... 直接看下面 推荐链接: Spring Aop实例之AspectJ注解配置

  3. 规则引擎集成接口（四）SQL执行语句

    SQL执行语句 右键点击数据库连接文件“hr”—“添加SQL执行语句”,如下图: 弹出窗体,如下图: 将显示名称改为“部门名称”,返回至类型设置为“string”,在编写sql语句,如下图: 点击确定 ...

  4. Delete Exists

    Create PROCEDURE [dbo].[LVS_Update_WaferInfo] @LotId varchar(40), @xmlData xmlasBEGIN delete W from ...

  5. cmd执行mysql操作

    (以下已安装到本机的mysql为例) 登录mysql数据库,如果没有在环境变量配置path到mysql中的bin目录,需要手动进入该目录中 执行:mysql -u用户名 -p密码 (注意:只要进入了m ...

  6. php使用ajax导出CSV或者EXCEl(thinkphp)方法

    首先我强烈推荐看到这篇文章的你将导出文件设置为csv格式的文件 实际测试导出csv文件的速度是excel文件的10几倍左右 首先我先介绍csv文件的导出的方法: 如果你单纯是在数据导出界面上通过用户点 ...

  7. MyBatis学习总结(七)——Mybatis缓存（转载）

      孤傲苍狼 只为成功找方法,不为失败找借口! MyBatis学习总结(七)--Mybatis缓存 一.MyBatis缓存介绍 正如大多数持久层框架一样,MyBatis 同样提供了一级缓存和二级缓存的 ...

  8. jQuery.fn.extend() 与 jQuery.extend()

    jQuery.fn如何扩展. jQuery插件 $.fn(object)与$.extend(object) jQuery提供了两个方法帮助开发插件 $.extend(object);扩展jQuery类 ...

  9. HDU1005

    Number Sequence  HDU-1005 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Jav ...

  10. MaxScript重启3dsMax的重新思考

    前天看到一位大神写用MaxScript实现重启3dsMax的方法,用的是.net临时编译一个exe出来,然后用这个新的进程来关闭并开启新的max.感觉这种思路不错,或许可以用在别的地方.不过谈及max ...