1、简易气泡

eg:

html部分:
<div class="bubble">我是气泡文本</div>
css部分:
//小三角
.bubble:before{
position: absolute;
top: 80px;
left: 30px;
content: '';
border: 15px solid transparent;
border-top-color: cadetblue;
}
.bubble{
position: relative;
height: 80px;
width: 200px;
border: 2px solid cadetblue;
}
页面效果:

2、复杂气泡

简述:两个小三角的叠用,用与背景色相同的小三角挡住另一小三角的横线部分。如图:

html部分:
<div class="wrap">
<span></span>
<span></span>
<div class="bub">我是气泡文本</div>
</div>
css部分:
.wrap span:first-child{
position: absolute;
bottom:-30px;
left: 20px;
border: 15px solid transparent;
border-top-color: cadetblue;
}
.wrap span:nth-child(2){
position: absolute;
bottom:-26px;
left: 20px;
border: 15px solid transparent;
border-top-color: #ffffff;
}
.bub{
position: relative;
height: 80px;
width: 200px;
border: 2px solid cadetblue;
z-index: -1;
}
页面效果:

css 文本气泡样式的更多相关文章

  1. css文本背景样式

    文本样式 文本类 text-transform:uppercase: 全部变为大写 text-transform:lowercase: 全部变为小写 text-transform:capitalize ...

  2. css聊天气泡样式

    https://files.cnblogs.com/files/zonglonglong/%E8%81%8A%E5%A4%A9%E6%B0%94%E6%B3%A1.zip

  3. 第 15 章 CSS 文本样式[下]

    学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.文本总汇 本节课, ...

  4. 第 15 章 CSS 文本样式[上]

    学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.字体总汇 本节 ...

  5. Css入门课程 Css文本样式

    文字是网页的非常基础的内容,文本的样式设置也是非常重要的 1 字体大小 font-size:绝对大小单位和相对大小单位,绝对大小单位有cm,mm in(厘米,毫米,英寸)等,这是大小不随屏幕分辨率大小 ...

  6. css文字与文本相关样式

    css文字属性定义文本的字体系列,大小,加粗,风格和变形   font-family          设置字体系列 font-size          设置字体的尺寸 font-style     ...

  7. CSS文字,文本常用样式

    CSS文字,文本常用样式 字体属性 font-family 如果电脑没有第一个字体,就切换到下一个 body { font-family: Microsoft YaHei,Helvetica,Aria ...

  8. css 文本外观属性(text) 和 字体样式属性(font)

    css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距 对中文无效 line ...

  9. css基础-css选择器和css文本样式相关

    css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...

随机推荐

  1. iOS开发者证书申请过程

    真机测试前准备工作:1.苹果的MAC一台.如果你用的是***不知道可不可以,反正我没用过...一般公司都会给你配开发工具的.2.iphone手机一部.(本人纯屌丝,用的iphone4)3.开发者账号. ...

  2. HDU 5010 Get the Nut(2014 ACM/ICPC Asia Regional Xi'an Online)

    思路:广搜, 因为空格加上动物最多只有32个那么对这32个进行编号,就能可以用一个数字来表示状态了,因为只有 ‘P’   'S' 'M' '.' 那么就可以用4进制刚好可以用64位表示. 接下去每次就 ...

  3. MAC与windows下打开当前文件路径的命令行(终端)

    MAC 下文件夹与终端: 1.打开当前路径的终端窗口方法: ①直接拖动要打开的文件夹到终端 ②打开finder的服务偏好设置, 勾选"新建位于文件夹位置的终端"选项, 以后可以在文 ...

  4. cocoapods无法使用(mac os 10.11升级导致pod: command not found)

    之前安装了cocoapods, 那么输入 : sudo gem install -n /usr/local/bin cocoapods 如果还不行的话 首先在终端输入 gem sources -l 查 ...

  5. 【转】Linux查看机器负载

    转自 http://blog.csdn.net/szchtx/article/details/38455385 感谢 负载(load)是Linux机器的一个重要指标,直观了反应了机器当前的状态.如果机 ...

  6. google closure继承模块三:goog.base()源码分析

    直接看代码吧: base: function (me, opt_methodName, var_args) { var caller = arguments.callee.caller; if (ca ...

  7. 如何让Button使用自定义icon

    1.在Buttton所在的html页面定义button要使用的icon的css样式,如 </style> <style> .dijitArrowIcon { backgroun ...

  8. MongooseJS 4.6.4 发布,MongoDB 连接包

    MongooseJS 4.6.4  发布了,MongooseJS 是基于 node.js,使用 JavaScript 编程,连接 MongoDB 数据库的软件包,使MongoDB 的文档数据模型变得优 ...

  9. oracle使用sqlplus创建表空间

    一.打开命令行窗口,输入以下命令:sqlplus /nolog 回车后,将出现提示符 SQL>, 这时输入conn / as sysdba 一般即可登录,如果失败的话,可以试一下用conn sy ...

  10. SQL变量、Substring、charindex、case函数、去除重复

      isnull(aa,0)删除表数据: truncate table aaa 添加字段: ALTER TABLE table1 ADD col1 varchar(200) DEFAULT '2008 ...