css 文本气泡样式
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 文本气泡样式的更多相关文章
- css文本背景样式
文本样式 文本类 text-transform:uppercase: 全部变为大写 text-transform:lowercase: 全部变为小写 text-transform:capitalize ...
- css聊天气泡样式
https://files.cnblogs.com/files/zonglonglong/%E8%81%8A%E5%A4%A9%E6%B0%94%E6%B3%A1.zip
- 第 15 章 CSS 文本样式[下]
学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.文本总汇 本节课, ...
- 第 15 章 CSS 文本样式[上]
学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.字体总汇 本节 ...
- Css入门课程 Css文本样式
文字是网页的非常基础的内容,文本的样式设置也是非常重要的 1 字体大小 font-size:绝对大小单位和相对大小单位,绝对大小单位有cm,mm in(厘米,毫米,英寸)等,这是大小不随屏幕分辨率大小 ...
- css文字与文本相关样式
css文字属性定义文本的字体系列,大小,加粗,风格和变形 font-family 设置字体系列 font-size 设置字体的尺寸 font-style ...
- CSS文字,文本常用样式
CSS文字,文本常用样式 字体属性 font-family 如果电脑没有第一个字体,就切换到下一个 body { font-family: Microsoft YaHei,Helvetica,Aria ...
- css 文本外观属性(text) 和 字体样式属性(font)
css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距 对中文无效 line ...
- css基础-css选择器和css文本样式相关
css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...
随机推荐
- iOS开发者证书申请过程
真机测试前准备工作:1.苹果的MAC一台.如果你用的是***不知道可不可以,反正我没用过...一般公司都会给你配开发工具的.2.iphone手机一部.(本人纯屌丝,用的iphone4)3.开发者账号. ...
- HDU 5010 Get the Nut(2014 ACM/ICPC Asia Regional Xi'an Online)
思路:广搜, 因为空格加上动物最多只有32个那么对这32个进行编号,就能可以用一个数字来表示状态了,因为只有 ‘P’ 'S' 'M' '.' 那么就可以用4进制刚好可以用64位表示. 接下去每次就 ...
- MAC与windows下打开当前文件路径的命令行(终端)
MAC 下文件夹与终端: 1.打开当前路径的终端窗口方法: ①直接拖动要打开的文件夹到终端 ②打开finder的服务偏好设置, 勾选"新建位于文件夹位置的终端"选项, 以后可以在文 ...
- cocoapods无法使用(mac os 10.11升级导致pod: command not found)
之前安装了cocoapods, 那么输入 : sudo gem install -n /usr/local/bin cocoapods 如果还不行的话 首先在终端输入 gem sources -l 查 ...
- 【转】Linux查看机器负载
转自 http://blog.csdn.net/szchtx/article/details/38455385 感谢 负载(load)是Linux机器的一个重要指标,直观了反应了机器当前的状态.如果机 ...
- google closure继承模块三:goog.base()源码分析
直接看代码吧: base: function (me, opt_methodName, var_args) { var caller = arguments.callee.caller; if (ca ...
- 如何让Button使用自定义icon
1.在Buttton所在的html页面定义button要使用的icon的css样式,如 </style> <style> .dijitArrowIcon { backgroun ...
- MongooseJS 4.6.4 发布,MongoDB 连接包
MongooseJS 4.6.4 发布了,MongooseJS 是基于 node.js,使用 JavaScript 编程,连接 MongoDB 数据库的软件包,使MongoDB 的文档数据模型变得优 ...
- oracle使用sqlplus创建表空间
一.打开命令行窗口,输入以下命令:sqlplus /nolog 回车后,将出现提示符 SQL>, 这时输入conn / as sysdba 一般即可登录,如果失败的话,可以试一下用conn sy ...
- SQL变量、Substring、charindex、case函数、去除重复
isnull(aa,0)删除表数据: truncate table aaa 添加字段: ALTER TABLE table1 ADD col1 varchar(200) DEFAULT '2008 ...