如同人类的的进化一样， CSS3 是 CSS2 的“进化”版本，在 CSS2 基础上， 增强 或 新增 了许多特性， 弥补了
CSS2 的众多不足之处，使得 Web 开发变得更为高效和便捷。
Html4-html5 css2- css3
CSS3的现状
1 、浏览器支持程度差，需要添加 私有前缀
2 、移动端支持优于 PC 端
3 、不断改进中
4 、应用相对广泛
如何对待
- 坚持渐进增强原则
渐进增强： 让低版本浏览器 可以使用最基本的功能，高版本的浏览器具有更好的用户体验
2 、考虑用户群体
3 、遵照产品的方案
4 、 听 Boss 的
准备工作
统一环境
由于 CSS3 兼容性问题的普遍存在，为了避免因兼容性带来的干扰，我们约定统一的环境，以保证学习的效
率，在最后会单独说明兼容性的问题。
1 、 Chrome 浏览器 version 46+
2 、 Firefox 浏览器 firefox 42+
3 、 PhotoShop CS6 （建议）
如何使用手册
学会使用工具，可以让我们事半功倍。
元字符 | 含义 | 示例 |
[] | 全部可选项 | padding: [<length> | <percentage>]{1, 4} |
|| | 并列 | border: <line-width> || <line-style> || <color> |
| | 多选一 | position: static | relative | absolute | fixed |
? | 0 个或 1 个 | box-shadow: none | <shadow>[, <shadow>]* <shadow>: inset? && <length>{2, 4} && <color>? |
* | 0 个或多个 | |
{} | 范围 |
学会查看手册，培养自主学习能力。
基础知识
属性选择器
CSS3 新增了许多 灵活 查找元素的方法，极大的提高了查找元素的效率和 精准度 。 CSS3 选择器与 jQuery 中所提供的 绝大部分 选择器兼容。
其特点是通过 属性 来选择元素，具体有以下 5 种形式：
选择器 | 示例 | 含义 |
E[attr] | | 存在 attr 属性即可 |
E[attr=val] | | 属性值 完全等于 val |
E[attr*=val] | | 属性值里包含 val 字符并且在“ 任意 ”位置 |
E[attr^=val] | | 属性值里包含 val 字符并且在“ 开始 ”位置 |
E[attr$=val] | | 属性值里包含 val 字符并且在“ 结束 ”位置 |
伪类
除了以前学过的 :link 、 :active 、 :visited 、 :hover ， CSS3 又新增了其它的伪类选择器。
1 、结构 ( 位置 ) 伪类
以某元素（ E ）相对于其父元素或兄弟元素的位置来获取无素；
选择器 | 示例 | 含义 |
E:first-child | | 其父元素的第 1 个子元素 |
E:last-child | | 其父元素的最后 1 个子元素 |
E:nth-child(n) | | 其父元素的第 n 个子元素 |
E:nth-last-child(n) | | 其父元素的第 n 个子元素（倒着数） |
n 遵循线性变化，其取值 0 、 1 、 2 、 3 、 4 、 ...
n 可是多种形式： nth-child(2n+0) 、 nth-child(2n+1) 、 nth-child(-1n+3) 等；
注：指 E 元素的父元素，并对应位置的子元素必须是 E
2 、空伪类
E:empty 选中没有任何子节点的 E 元素；（使用不是非常广泛）
3 、目标伪类
E:target 结合锚点进行使用，处于 当前锚点 的元素会被选中；
4 、排除伪类
E:not(selector) 除 selector （任意选择器）外的元素会被选中；
伪元素
1 、 E::first-letter 文本的第一个单词或 字（如中文、日文、韩文等）
2 、 E::first-line 文本第一行；
3 、 E::selection 可改变选中文本的样式；
4 、 E::before 和 E::after
在 E 元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合 content 属性使用。
E:after 、 E:before 在 旧版本 里是伪元素， CSS3 的规范里“ : ”用来表示伪类，“ :: ”用来表示伪元素，但是在高版本浏览器下 E:after 、 E:before 会被自动识别为 E::after 、 E::before ，这样做的目的是用来做 兼容处理 。
E:after 、 E:before 后面的练习中会反复用到，目前只需要有个大致了解
":" 与 "::" 区别在于区分伪类和伪元素
颜色
新增了 RGB A 、 HSL A 模式，其中的 A 表示透明度通道，即可以设置颜色值的透明度，相较 opacity ，它们不具有继承性，即不会影响子元素的透明度。
如下图所示为颜色表示方法：
RGBA
R ed 、 G reen 、 B lue 、 A lpha 即 RGBA
H ue 、 S aturation 、 L ightness 、 A lpha 即 HSLA
不同的颜色表示方法其取值也不相同，具体如下：
R 、 G 、 B 取值范围 0~255
HSLA
H 色调 取值范围 0~360 ， 0/360 表示红色、 120 表示绿色、 240 表示蓝色
S 饱和度 取值范围 0%~100%
L 亮度 取值范围 0%~100%
A 透明度 取值范围 0~1
RGBA 、 HSLA 可应用于所有使用颜色的地方。
见代码示
关于 CSS 透明度：
1 、 opacity 只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；
2 、 transparent 不可调节透明度，始终完全透明
文本
text-shadow ，可分别设置偏移量、模糊度、颜色（可设透明度）。
如： text-shadow: 2px 2px 2px #CCC;
1 、水平偏移量 正值向右 负值向左；
2 、垂直偏移量 正值向下 负值向上；
3 、模糊度是不能为负值；
盒模型
CSS3 中可以通过 box-sizing 来指定盒模型，即可指定为 content-box 、 border-box ，这样我们 计算盒子大小的
方式就发生了改变 。
可以分成两种情况：
1 、 box-sizing: border-box 盒子大小为 width
2 、 box-sizing: content-box 盒子大小为 width + padding + border
注：上面的标注的 width 指的是 CSS 属性里设置的 width: length ， content 的值是会自动调整的。
边框
其中 边框圆角 、 边框阴影 属性， 应用十分广泛 ，兼容性也相对较好，具有符合渐进增强原则的特征，我们
需要 重点掌握 。
边框圆角
border-radius
圆角处理时，脑中要形成圆、圆心、横轴、纵轴的概念， 正圆是椭圆的一种特殊情况 。如下图
为了方便表述，我们将四个角标记成 1 、 2 、 3 、 4 ，如 2 代表右上角， CSS 里提供了 border-radius 来设置这些角
横纵轴半径值。
见代码示例 01 边框 - 圆角 border-radius.html
分别设置横纵轴半径，以“ / ”进行分隔，遵循“ 1 ， 2 ， 3 ， 4 ”规则，“ / ”前面的 1~4 个用来设置横轴半径
（分别对应横轴 1 、 2 、 3 、 4 位置 ），“ / ”后面 1~4 个参数用来设置纵轴半径（分别对应纵轴 1 、 2 、 3 、 4 位置 ）。
支持简写模式，具体如下：
1 、 border-radius: 10px; 表示四个角的横纵轴半径都为 10px ；
2 、 border-radius: 10px 5px; 表示 1 和 3 角横纵轴半径都为 10px ， 2 和 4 角横纵轴半径为 5px ；
3 、 border-radius: 10px 5px 8px; 表示 1 角模纵轴半径都为 10px ， 2 和 4 角横纵轴半径都为 8px ， 3 角的横纵轴半径都为 8px ；
4 、 border-radius: 10px 8px 6px 4px; 表示 1 角横纵轴半径都为 10px ，表示 2 角横纵轴半径都为 8px ，表示 3 角横
纵轴半径都为 6px ，表示 4 角横纵轴半径都为 6px ；
见代码示例 02 边框 - 圆角 - 详解 border-radius.html
边框阴影
box-shadow
与文字阴影类似，可分别设置盒子阴影偏移量、模糊度、颜色（可设透明度）。
如 box-shadow: 5px 5px 5px #CCC
1 、水平偏移量 正值向右 负值向左；
2 、垂直偏移量 正值向下 负值向上；
3 、模糊度是不能为负值；
4 、 inset 可以设置内阴影；
注：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。可以设置多重边框阴影，实现更好的效果，增强立体感， 符合渐进增强，实际开发中可以大胆使用。
背景
背景在 CSS3 中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
- background-size
通过 background-size 设置背景图片的尺寸，就像我们设置 img 的尺寸一样，在移动 Web 开发中做屏幕适配应
用非常广泛。
其参数设置如下：
a) 可以设置长度单位 (px) 或百分比（设置百分比时，参照盒子的宽高）
b) 设置为 cover 时，会自动调整缩放比例，保证图片始终 填充满 背景区域，如有 溢出部分 则会被隐藏。
c) 设置为 contain 会自动调整缩放比例，保证图片始终 完整显示 在背景区域。
2 、 background-origin
通过 background-origin 可以设置背景图片定位 (background-position) 的参照原点。
其参数设置如下：
border-box 以边框做为参考原点；
padding-box 以内边距做为参考原点；
content-box 以内容区做为参考点；
3 、 background-clip
通过 background-clip ，可以设置对背景区域进行裁切，即改变背景区域的大小。
其参数设置如下：
border-box 裁切边框以内为背景区域；
padding-box 裁切内边距以内为背景区域；
content-box 裁切内容区做为背景区域；
4 、多背景
以逗号分隔可以设置多背景，可用于自适应布局
渐变
渐变是 CSS3 当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使
用数量，并且具有很强的适应性和可扩展性。
线性渐变(渐进增强原则）
linear-gradient 线性渐变指沿着某条直线朝一个方向产生渐变效果，如下图是从黄色渐变到绿色。
1 、必要的元素：
借助 Photoshop 总结得出线性渐变的必要元素
a 、方向
b 、起始色
c 、终止色
d 、渐变距离
2 、关于方向
设置渐变方向，可以用关键字如 to top 、 to right ，也可以用角度（正负值均可）如 45deg 、 -90deg 等，当以角
度做为参数时，可参照下图来使用， 0deg 从下往上， 90deg 从左向右，进而可以推算出 180deg 从上向下。
注：我们可以设置渐变的起始点，这个起始点的值可以是百分比形式，这个百分比在没有设置 background-size 时，是相对于盒子大小的，当设置了 background-size 时则是相对于 background-size 的。
径向渐变
radial-gradient 径向渐变指从 一个中心点 开始沿着 四周 产生渐变效果
1 、必要的元素：
a) 辐射范围即圆半径
b) 中心点 即圆的中心
c) 渐变起始色
d) 渐变终止色
e) 渐变范围
2 、关于中心点
中心位置参照的是盒子的左上角，例如 background-image: radial-gradient(120px at 0 0 yellow green) 其圆心点为
左上角， background-image: radial-gradient(120px at 0 100% yellow green) 其圆心为左下角。
3 、关于辐射范围
其半径可以不等，即可以是椭圆，如 background-image: radial-gradient(120px 100px at 0 0 yellow green) 会是一个
椭圆形（横轴
120px 、纵轴 100px ）的渐变。
写在最后
关于渐变不同浏览器有不同的版本，即语法格式不一样，我们以最新语法为准，可自行查找资料 了解即可。
http://www.w3cplus.com/css3/new-css3-linear-gradient.html
过渡
过渡是 CSS3 中具有颠覆性的特征之一，可以实现元素不同状态间的 平滑 过渡（补间动画），经常用来制作
动画效果。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
见代码示例 baidu.html
补间动画：自动完成从起始状态到终止状态的的过渡。
见代码示例 01 体验过渡 .html
关于补间动画更多学习可查看 http://mux.alimama.com/posts/1009
在 CSS3 里使用 transition 可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在
两种状态 ( 我们用 A 和 B 代指），就可以实现平滑的过渡，为了方便演示采用 hover 切换两种状态，但是并不
仅仅局限于 hover 状态来实现过渡。
可以通过 all 设置所有属性的过渡效果，也可以分别设置某一属性的过渡效果，可以将过渡属性 transition 设置
在 A 或 B 状态，但是会有一些细节的差异，
transition 属性拆解如下表：
属性 | 示例 | 含义 |
transition-property | | 设置过渡属性 |
transition-duration | | 设置过渡时间 |
transition-timing-function | | 设置过渡速度 |
transition-delay | | 设置过渡延时 |
单词
empty | 空的；无意义的；无知的； | 英 ['em(p)tɪ] |
letter | 信；字母，文字； | 英 ['letə] |
transparent | 透明的；显然的；坦率的；易懂的 | 美 [træns'pærənt] |
shodow | 阴影；影子；幽灵；庇护；隐蔽处 | 美 ['ʃædo] |
origin | 起源；原点；出身；开端 | 美 ['ɔrɪdʒɪn] |
clip | 剪；剪掉；缩短 | 美 [klɪp] |
gradient | 梯度；坡度；倾斜度 | 美 ['ɡredɪənt] |
radial | 半径的；放射状的；光线的；光线状的 | 美 ['redɪəl] |
�� 2 ҳ
边框
其中 边框圆角 、 边框阴影 属性， 应用十分广泛 ，兼容性也相对较好，具有符合渐进增强原则的特征，我们
需要 重点掌握 。
边框圆角
border-radius 每个角可以设置两个值 ， x 值， y 值
圆角处理时， 脑中要
形成圆、圆心、横轴、纵轴的概念， 正圆是椭圆的一种特殊情况 。如下图
可分别设置长、短半径，以“ / ”进行分隔，遵循“ 1 ， 2 ， 3 ， 4 ”规则，“ / ”前面的 1~4 个用来设置横轴半
径（分别对应横轴 1 、 2 、 3 、 4 位置 ），“ / ”后面 1~4 个参数用来设置纵轴半径（分别对应纵轴 1 、 2 、 3 、 4
位置 ）
边框阴影
box-shadow 与 text-shadow 用法差不多
1 、水平偏移量 正值向右 负值向左；
2 、垂直偏移量 正值向下 负值向上；
box-shadow: 5px 5px 27px red, -5px -5px 27px green;
3 、模糊度是不能为负值；
4 、 inset 可以设置内阴影；
设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。
可以设置多重边框阴影，实现更好的效果，增强立体感 。
1.1.4案例 用css 实现
渐变
渐变是 CSS3 当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使
用数量，并且具有很强的适应性和可扩展性。
可分为线性渐变、径向渐变
线性渐变 （gradient 变化）
linear-gradient 线性渐变指沿着某条直线朝一个方向产生渐变效果。
上图是从黄色渐变到绿色
Background:linear-gradient(
To right 表示方向 (left,top,right,left , 也可以使用度数 )
Yellow, 渐变起始颜色
Green 渐变终止颜色
)
1 、必要的元素：
a 、方向
b 、起始颜色
c 、终止色；
2 、关于方向如下图
径向渐变 (radial 径向)
radial-gradient 径向渐变指从 一个中心点 开始沿着 四周 产生渐变效果
background
:
radial-gradient
(
150
px at center
,
yellow
,
green
);
围绕中心点做渐变，半径是 150px ，从黄颜色到绿颜色做渐变 .
1 、必要的元素：
a 、辐射范围即圆半径 ( 半径越大，渐变效果越大 )
b 、中心点 即圆的中心 ( 中心点的位置是以盒子自身 )
background
:
radial-gradient
(
150
px at left center
,
yellow
,
green
);
以左上角为圆的中心点
background
:
radial-gradient
(
150
px at 0px 0px
,
yellow
,
green
);
c 、渐变起始色
d 、渐变终止色
2 、关于中心点：中心位置参照的是 盒子的左上角
3 、关于辐射范围：其半径可以不等，即可以是椭圆
div
{
width
:
300
px
;
height
:
300
px
;
margin
:
100
px auto
;
background
:
radial-gradient
(
250
px at
0
px
0
px
,
yellow
,
green
);
border-radius
:
150
px
;
}
背景
背景在 CSS3 中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
background-size:width,height 可以设置背景图片的宽度以及高度
- background-size设置背景图片的尺寸
background-size:600px,auto;
自动是适应盒子的宽度
background-size: 100% auto; 当宽度发送改变时，高度会有内容溢出。
常规用法，通过百分百，和像素来调整背景的尺寸.
background-size : auto 100 %;
cover 会自动调整缩放比例，保证图片始终 填充满 背景区域，如有 溢出部分 则会被隐藏。
整个背景图片完整显示在背景区域 .
contain 会自动调整缩放比例，保证图片始终 完整显示 在背景区域。
也可以使用长度单位或百分比
案例 : 全屏背景自动适应 .
- background-origin(原点，起点)设置背景定位的原点
所谓的背景原点就是调整背景位置的一个参照点 .
调整背景图片定位的参照原点 .
border-box 以边框做为参考原点；
padding-box 以内边距做为参考原点；
content-box 以内容区做为参考点；
3 、 background-clip 设置背景区域 clip( 裁切 )
border-box 裁切边框以内为背景区域；
padding-box 裁切内边距以内为背景区域；
content-box 裁切内容区做为背景区域；
4 、以逗号分隔可以设置多背景，可用于自适应局
背景图片尺寸在实际开发中应用十分广泛 。
过渡(transition)
Transition:param1 param2
param1 要过渡的属性
param2 过渡的时间 .
过渡是 CSS3 中具有颠覆性的特征之一，可以实现元素不同状态间的 平滑过渡 （补间动画），经常用来制作
动画效果。
补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态
帧动画：扑克牌切换 . 通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
关于补间动画更多学习可查看 http://mux.alimama.com/posts/1009
特点：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。
transition-property 设置过渡属性
transition-duration 设置过渡时间 用来控制速度 linear( 匀速 )
ease-in ( 加速 )
transition-timing-function 设置过渡速度
transition-delay 设置过渡延时 超过时间后执行动画
以上四属性重在理解
2D转换 transform
转换是 CSS3 中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配
合即将学习的过渡和动画知识，可以取代大量之前只能靠 Flash 才可以实现的效果。在 css3 当中，通过
transform( 变形 ) 来实现 2d 或者 3d 转换 , 其中 2d 有，缩放，移动，旋转，扭曲。
- 缩放 scale (x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值；
- 移动 translate(x, y) 可以改变元素的位置，x、y可为负值；
x 在水平方向移动。
y 在垂直方向移动。
- 旋转 rotate(30deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；
- skew(30deg,30deg) 倾斜
x 沿着水平方向倾斜
y 沿着水平方向倾斜
案例 1 ，火箭移动
案例 2 盾牌，将位置还原
案例 3 旋转 原点
单词：
transition | 过渡；转变； | [træn'zɪʃən] |
property | 性质，性能；财产；所有权 | ['prɑpɚti] |
duration | 持续，持续的时间，期间 | [du'reʃən] |
transform | 改变，使…变形；转换 | [træns'fɔrm] |
scale | 规模；比例； | [skel] |
rotate | 旋转；循环 | ['rotet] |
translate | 转变为；调动 | [træns'let] |
skew | . 斜交；歪斜 | [skjuː] |
perspective | 观点；远景；透视图 | [pɚ'spɛktɪv] |
preserve | 保存；保护；维持； | [prɪ'zɝv]] |
animation | 活泼，生气；激励；卡通片绘制 | [,ænɪ'meʃən] |
iteration | 迭代；反复；重复 | [,ɪtə'reʃən] |
inifinite | 无限的，无穷的；无数的；极大的 | ['ɪnfɪnət] |
alternate | 使交替；使轮流 | ['ɔltɚnət] |
| | |
1、3d变换
rotateX() 沿着x轴旋转
rotateY() 沿着y轴旋转
rotateZ() 沿着z轴旋转
translateX() 沿x轴位移
translateY() 沿Y轴位移
translateZ() 沿Z轴位移 translateZ 需要配合透视使用
旋转方向：
对着正方向去看 都是顺时针旋转
backface-visibility:hidden 背面不可见
伪元素 获取自定义属性的值
content:attr(data-text);
// 自定义属性的作用 存储数据
<span data-text="传">传</span
>
透视
如果希望看到 3d效果 需要添加透视 近大远小
透视 设置是 盒子 和 用户眼睛的距离，加给变换元素的父盒子
透视的值越大效果越不明显 perspective:1000px;
透视产生的3d效果,只是视觉上的呈现，并不是真正的3d
真正的3d的盒子
让子盒子保持真正的3d效果
transform-style:perserve-3d;
注意点：加给 父盒子
动画：
css3中也可以来定义动画
和 js使用函数类似 先定义 在调用
function say(){}
定义动画：
@keyframes 动画名称{
from{
起始状态
}
to{
结束状态
}
}
@keyframes 动画名称{
0%{
}
30%{
}
100%{
}
}
调用动画
animation: 动画名称 持续时间 ；
调用动画: 动画名称 持续时间 执行次数 是否反向 延迟执行 运动曲线..
动画名称： animation-name: move
单次动画执行时间：animation-duration: 2s;
重复次数 animation-iteration-count: 1; infinite 无数次
动画方向：animation-direction alternate：交替 reverse 反向
动画延迟：animation-delay: 1s;
动画结束后的所保持的状态：
backwards:保持动画开始前的状态
forwards:保持动画结束后的状态
运动曲线：animation-timing-function
linear 运算 ease-in-out :先加速后减速 steps
steps(ｎ) 让动画分步完成
animation-timing-function: steps(15);
动画的播放状态 ：paused 暂停 running 运行
animation-play-state: paused;
