过渡使用 trainsition 属性，让元素的样式变化，不再瞬间完成，而是可以设定时间，在时间段内逐渐完成。
对单独的div元素做分别做设置进行属性说明：
1、设置在3秒内完成颜色的变化
2、可以分别对不同的属性分开做时间长度的设定，记得用逗号隔开
3、延迟delay：想在某个属性开始执行样式变化后的多少秒，才让另一个属性开始进行样式的动态变化，就可以使用延迟。用法就是：
2s 1s width ,意思就是在高度开始发生变化后的1s后，width的宽度才开始展现变化，然后在2s内完成宽度从30px到60px的变化。
delay的真正意义在于，它指定了动画发生的顺序，使得多个不同的transition可以连在一起，形成复杂效果
3、变化的速度：默认不设定，就是逐渐放慢的，默认值是ease
还可以额外指定设置：
linear:匀速
ease-in：加速
ease-out：减速
上述的三个情况，可以综合写为：
对应的变化就是，div的宽度瞬间变化为60px,然后高度在宽度变化后的1s之后才开始发生变化，在3秒内逐渐加速完成。
重点：
兼容性：各大浏览器基本已经支持无前缀的transition，所以可以直接使用不加前缀；
transition的变化设置，是只对有明确数值设置变化的，对于none,block这类的文字描述无效；
有效性：transition是一次性的，无法重复，除非反复触发。
1、相比于过渡属性transition的设置，动画animation的实现支持更为复杂的动态样式效果。
对单独的div元素做分别做设置进行属性说明：
1、使用animation动画属性，最重要的就是配合有“关键帧”——@keyframes
样式设置如下：
这样的设置，就是将1s分为3帧，每帧显示不同的背景颜色，然后动画效果只显示1次。
注意动画执行完成之后，就恢复元素原来定义的样式设置,如果原来没有这个样式的定义，那也是动画执行完成后恢复没有的状态。
@keyframes的写法比较松泛：
0%等同于from,100%等同于to：
如上面的写法就等同于：
下面的关键帧的写法也是有效的：
当然，（1）也是有延迟效果的设置：设置延迟多少秒后执行动画
（2）每帧之间是平滑过渡的，当然也可以设置为分步过渡，这样就有卡顿的效果：
解释：该动画，在停留1秒后开始执行，执行3次，每次执行时间为2秒，在2秒时间执行完成rainbow定义的关键帧样式，然后分步执行，有卡顿效果。
2、动画持续：动画效果默认只播放一次，加入infinite关键字，可以让动画无限次播放
3、指定动画播放的次数，直接写数值：
4、如果想要让动画结束后，停留在结束状态的样式，而不是默认变为起始状态，就可以添加关键字：
animation-fill-mode属性：
none：默认值，回到动画没开始时的状态
forwards：让动画停留在结束状态
backwards：让动画回到第一帧的状态
4、如果想要将帧数的设置，反向执行，就可以使用animation-direction属性：
normal：动画循环播放时，每次都是从结束状态跳回到起始状态，再开始播放
reverse：动画执行，先从结束帧的样式执行跳回到起始帧的样式。例如：
所有的transform属性设置，都不会改变元素占据的位置，还是保留的
1、旋转rotate
通过rotate设置旋转角度，来旋转元素
以div元素为例:
···
<body>
<div class="transform"></div>
</body>
···
2、位移translate
设置X轴、Y轴方向的位移值
设置X轴方向的位移值
设置Y轴方向的位移值
3、缩放scale
设置元素水平方向和垂直方向同时缩放
设置元素水平方向缩放
设置元素垂直方向缩放
只设置一个参数，设置元素水平方向和垂直方向，同一比例同时缩放
4、扭曲：skew，设置元素的平面XY轴的扭曲角度
设置元素X轴，Y轴的扭转角度
只设置一个参数，元素X轴，Y轴的扭转角度相同
设置元素X轴的扭转角度
设置元素Y轴的扭转角度
h5是html的最新版本，是14年由w3c完成标准制定。增强了，浏览器的原生功能，减少浏览器插件（eg：flash）的应用，提高用户体验满意度，让开发更加方便。
- h5新增的标签
新增元素
说明
video 表示一段视频并提供播放的用户界面
audio 表示音频
canvas 表示位图区域
source 为video和audio提供数据源
track 为video和audio指定字母
svg 定义矢量图
code 代码段
figure 和文档有关的图例
figcaption 图例的说明
main
time 日期和时间值
mark 高亮的引用文字
datalist 提供给其他控件的预定义选项
keygen 秘钥对生成器控件
output 计算值
progress 进度条
menu 菜单
embed 嵌入的外部资源
menuitem 用户可点击的菜单项
menu 菜单
template
section
nav
aside
article
footer
header
- css3
css3被划分为模块，最重要的几个模块包括：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面
选择器
框模型
背景和边框
border-radius、box-shadow、border-image、
background-size：规定背景图片的尺寸
background-origin：规定背景图片的定位区域
background-clip：规定背景的绘制区域
文本效果（常用）
text-shadow：设置文字阴影
word-wrap：强制换行
word-break
css3提出@font-face规则，规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range
2/3D转换
transform：向元素应用2/3D转换
transition：过渡
动画
@keyframes规则：
animation、animation-name、animation-duration等
用户界面（常用）
box-sizing、resize
css3新增伪类
：nth-child()
：nth-last-child()
：only-child
：last-child
：nth-of-type()
：only-of-type()
：empty
：target 这个伪类允许我们选择基于URL的元素，如果这个元素有一个识别器（比如跟着一个#），那么:target会对使用这个ID识别器的元素增加样式。
：enabled
：disabled
：checked
：not
一、新增的选择器
CSS3新增的属性选择器 {除ie6外的大部分浏览器支持）
1 E[att^="val"] 属性att的值以"val"开头的元素 div[id^="nav"] { background:#ff0}
2 E[att$="val"] 属性att的值以"val"结尾的元素
3 E[att*="val"] 属性att的值包含"val"字符串的元素
结构伪类选择器（过滤选择器）
(注：FireFox 1.5/2.0/3.0支持E:root，FireFox 3.0支持E:last-child、E:only-child、E:empty。
由于IE6/7/8不支持，没办法，选择合适的场合用吧。)
4 E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
5 E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1 p:nth-child(3) { color:#f00}
6 E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1 p:last-child { background:#ff0}
7 E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素 p:nth-of-type(2){color:red}选择父元素的第n个子元素p
8 E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
9 E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
10 E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
11 E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
12 E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) p:only-child { background:#ff0}
13 E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
14 E:empty 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素 p:empty { background:#ff0}
与用户界面(UI)有关的伪类(ie6 7 8不支持)
15 E:enabled 匹配表单中激活的元素
16 E:disabled 匹配表单中禁用的元素 input[type="text"]:disabled { background:#ddd}
17 E:checked 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
18 E::selection 匹配用户当前选中的元素
级元素通用选择器
ie6不支持
19 E ~ F 匹配任何在E元素之后的同级F元素 p ~ ul { background:#ff0}
反选伪类
(ie6 7 8 firefox3.0以下 Opera9.0不支持)
20 E:not(s) 匹配不符合当前选择器的任何元素 :not(p) { border:1px solid #ccc}
:target 伪类
(ie6 7 8不支持)
21 E:target 匹配文档中特定"id"点击后的效果
二、css3新增属性
一. box-shadow(阴影效果)
使用:
box-shadow: 20px 10px 0 #000
-moz-box-shadow: 20px 10px 0 #000
-webkit-box-shadow: 20px 10px 0 #000
支持:
FF3.5, Safari 4, Chrome 3
二. border-colors(为边框设置多种颜色)
使用:
border: 10px solid #000
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc
说明:
颜色值数量不固定, 且FF的私有写法不支持缩写: -moz-border-colors: #333 #444 #555
支持:
FF3+
三. boder-image(图片边框)
使用:
-moz-border-image: url(exam.png) 20 20 20 20 repeat
-webkit-border-image: url(exam.png) 20 20 20 20 repeat
说明:
(1). 20 20 20 20 --->边框的宽度, 分别对应top, right, bottom, left边框, 改变宽度可以实现不同的效果
(2). 边框图片效果(目前仅实现了两种):
repeat --- 边框图片会平铺, 类似于背景重复
stretch --- 边框图片会以拉伸的方式来铺满整个边框
(3). 必须将元素的边框厚度设置为非0非auto值.
支持:
FF 3.5, Safari 4, Chrome 3
四. text-shadow(文本阴影)
使用:
text-shadow: [<颜色><水平偏移><纵向偏移><模糊半径>] || [<水平偏移><纵向偏移><模糊半径><颜色>]
说明:
(1) <颜色>和<模糊半径>是可选的, 当<颜色>未指定时, 将使用文本颜色当<模糊半径>未指定时, 半径值为0
(2) shadow可以是逗号分隔的列表, 如:
text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd
(3) 阴影效果会按照shadow list中指定的顺序应用到元素上
(4) 这些阴影效果有可能相互重叠, 但不会叠加文本本身
(5) 阴影可能会跑到容器的边界之外, 但不会影响容器的大小.
支持:
FF 3.5, Opera 10, Safari 4, Chrome 3
五. text-overflow(文本截断)
使用:
text-overflow: inherit | ellipsis | clip
-o-text-overflow: inherit | ellipsis | clip
说明:
(1) 还有一个属性ellipsis-word, 但各浏览器均不支持.
支持:
IE6+, Safari4, Chrome3, Opera10
六. word-wrap(自动换行)
使用:
word-wrap: normal | break-word
支持:
IE6+, FF 3.5, Safari 4, Chrome 3
七. border-radius(圆角边框)
使用:
-moz-border-radius: 5px
-webkit-border-radius: 5px
支持:
FF 3+, Safari 4 , Chrome 3
八. opacity(不透明度)
使用:
opacity: 0.5
filter: alpha(opacity=50)/* for IE6, 7 */
-ms-filter(opacity=50)/* for IE8 */
支持:
all
九. box-sizing(控制盒模型的组成模式)
使用:
box-sizing: content-box | border-box// for opera
-moz-box-sizing: content-box | border-box
-webkit-box-sizing: content-box | border-box
说明:
1. content-box:
使用此值时, 盒模型的组成模式是, 元素宽度 = content + padding + border
2. border-box:
使用此值时, 盒模型的组成模式是, 元素宽度 = content(即使设置了padding和border, 元素的宽度
也不会变).
支持:
FF3+, Opera 10, Safari 4, Chrome 3
十. resize(元素缩放)
使用:
resize: none | both | horizontal | vertical
说明:
1. 必须将元素的overflow属性设置为auto或hidden, 该属性才能起作用(overflow设置为visible时, 无效)
2. 属性值说明:
(1). none -->禁用缩放
(2). both -->可同时缩放宽度和高度
(3). horizontal -->仅能缩放宽度
(4). vertical -->仅能缩放高度
支持:
safari 4, chrome 3
十一. outline(外边框)
使用:
outline: 边框厚度 边框样式 边框颜色
outline-offset: 偏移值
说明:
outline-offset需要独立写, 简写是无效的.
支持:
FF3+, safari 4, chrome 3, opera 10
十二. background-size(指定背景图片的尺寸)
使用:
-o-background-size: [length | percentage] {1, 2}
-webkit-background-size: [length | percentage] {1, 2}
例如:
-o-background-size: 50px 60px
-webkit-background-size: 50px 60px
这会将背景图片的宽设置了50px, 高60px.
支持:
safari 4, chrome 3, opera 10
十三. background-origin(指定背景图片从哪里开始显示)
使用:
-webkit-background-origin: border | padding | content
-moz-background-origin: border | padding | content
说明:
(1) border --> 从border区域开始显示背景
(2) padding --> 从padding区域开始显示背景
(3) content --> 从content区域开始显示背景
注意:
1. 必须先指定background属性, 然后才能指定该属性, 如果该属性出现在background属性之前,
会无效.
支持:
safari 4, chrome 3, FF 3+
十四. background-clip(指定背景图片从什么位置开始裁切)
使用:
-webkit-background-origin: border-box | padding-box | content-box | no-clip
说明:
(1) border-box --> 从border区域向外裁剪背景
(2) padding-box --> 从padding区域向外裁剪背景
(3) content-box --> 从content区域向外裁剪背景
(4) no-clip -->不裁切背景.
注意:
1. 必须先指定background属性, 然后才能指定该属性, 如果该属性出现在background属性之前,
会无效.
支持:
safari 4, chrome 3
十五. background(为一个元素指定多个背景)
使用:
background: [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position]
例子:
background: url(bg1.png) no-repeat left top, url(bg2.png) no-repeat right bottom
支持:
safari 4, chrome 3
十六. hsl(通过色调, 饱和度, 亮度来指定颜色值)
使用:
hsl: ( <length> || <percentage> || <percentage>)
说明:
(1) length: h(色调), 0(或360)表示红色, 120表示绿色, 240表示蓝色
(2) percentage: s(饱和度), 取值为0%到100%之间的值
(3) percentage: l(亮度), 取值为0%到100%之间的值
例子:
background: hsl(240, 50%, 100%)
color: hsl(100, 80, 100%)
支持:
safari 4, chrome 3, FF3, opera 10
十七. hsla(在hsl的基础上上增加了一个透明度设置)
使用:
hsla: ( <length> || <percentage> || <percentage>|| <opacity>)
说明:
(1) opacity: a(透明度), 取值在0到1之间
例子:
background: hsl(240, 50%, 100%, 0.5)
color: hsl(240, 50%, 100%, 0.5)
支持:
safari 4, chrome 3, FF3, opera 10
十八. rgba(基于r,g,b三个颜色通道来设置颜色值, 通过a来设置透明度)
使用:
rgba: (r, g, b, opacity)
说明:
(1) r: 红色, 正整数 | 百分数
(2) g: 绿色, 正整数 | 百分数
(3) b: 蓝色, 正整数 | 百分数
(4) a: 透明度, 取值在0到1之间
(5) 正整数在0到255之间, 百分数在0%到100%之间.
例子:
rgba: (100%, 244, 0, 0.5)
支持:
safari 4, chrome 3, FF3, opera 10
十九、 transition（a标签hover渐隐效果）
a:hover{transition: color 0.15s linear 0s, background-color 0.3s linear 0s}
-webkit-transition:color 0.15s linear 0s, background-color 0.3s linear 0s
-moz-transition:color 0.15s linear 0s, background-color 0.3s linear 0s
-o-transition:color 0.15s linear 0s, background-color 0.3s linear 0s
-ms-transition:color 0.15s linear 0s, background-color 0.3s linear 0s
transition:color 0.15s linear 0s, background-color 0.3s linear 0s
