1.厂商前缀
IE： -ms-
Chrome&Safari： -webkit-
FireFox： -moz-
Opera： -o-
2.CSS3选择器
丰富选择的目的：在标签中减少class和id属性的使用。
1）属性选择器
[属性名]
[属性名=属性值]
[属性名^=属性值]
[属性名$=属性值]
[属性名*=属性值]
2）结构性伪类
:first-child
:last-child
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:only-child
:only-of-type
:empty
3）目标伪类
:target
4）UI元素状态伪类
:checked (只在Opera浏览器中有效)
:disabled
:enabled
:selection
5）否定伪类
:not()
6）通用兄弟元素选择器
3.CSS3文本
1） 文本阴影（主流浏览器都支持，（IE9以上支持））
text-shadow: 水平偏移距离 垂直偏移距离 [模糊距离] [阴影的尺寸] [颜色] [inset];
2）文本自动换行（主流浏览器都支持）
word-wrap: normal|break-word;
3）单词拆分（主流浏览器都支持）
word-break: normal|break-all|keep-all;
4）文本拆分（所有主流浏览器都不支持）
text-wrap: normal|none|unrestricted|suppress;
5）文本溢出
a)单行文本溢出（重要）
text-overflow: clip|ellipsis|string;
处理文字溢出样式：
width: px/%/em/rem...;
white-space: nowrap; /* 为允许折行 */
-ms-text-overflow: ellipsis; /* 处理IE兼容 */
text-overflow: ellipsis;
overflow: hidden;
b)多行文本溢出（IE9以下的版本不支持，主要是谷歌支持）
width: px/%/em/rem...;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 行数;
overflow: hidden;
4.CSS3边框
1）圆角边框（掌握）
border-radius: 1-4 length|% / 1-4 length|%;
四个方位的词：top-left/top-right/bottom-left/bottom-right
2）边框阴影（IE9以上支持）
box-shadow: 水平偏移距离 垂直偏移距离 [模糊距离] [阴影的尺寸] [颜色] [inset];
3）边框图片(IE11.0及以后版本支持）
border-image：图片 向内偏移距离 宽度 图像区域超出边框的距离 重复效果;
重复效果：round/strech/repeat
5.CSS3背景
1）多重背景
background: 背景色 背景图片 平铺方式 位置,背景色 背景图片 平铺方式 位置,...
2）background-size：设定背景图像的尺寸。
background-size: 固定长度|百分比值|cover|contain;
3）background-origin：指定背景图像的位置区域。
background-origin: padding-box|border-box|content-box;
4）background-clip：设定背景的绘制区域。
background-clip: border-box|padding-box|content-box;
5）渐变背景
background-image: 线性渐变｜径向渐变
6.CSS3颜色函数
1）RGBA
rgba(r,g,b,a)
r:红色 取值范围：0-255/0-100%
g:绿色 取值范围：0-255/0-100%
b:蓝色 取值范围：0-255/0-100%
a:不透明度 取值范围：0-1的一个小数
2）HSL
hsl(h,s,l)
h:色调 取值范围：0-360
s:饱和度 取值范围：0-100%
l:亮度 取值范围：0-100%
3）HSLA
hsla(h,s,l,a)
h:色调 取值范围：0-360
s:饱和度 取值范围：0-100%
l:亮度 取值范围：0-100%
a:不透明度 取值范围：0-1的一个小数
opacity
调整元素的不透明度，大多数情况下用于做元素的遮罩效果。取值范围：0-1的一个小数
IE8及8以下版本不支持opacity，处理兼容的方式，再添加一行代码来处理不透明度：
filter:alpha(opacity=数值） 数值的范围：0-100
CSS3渐变
渐变主要用来设置背景或制作三维图。
1）线性渐变
background: linear-gradient(方向或角度, 颜色1 百分比, 颜色2 百分比, ...);
方向：
to left:从右向左渐变
to right:从左向右渐变
to top:从下向上渐变
to bottom:从上向下渐变
to top left:从右下角向左上角渐变
to top right:从左下角向右上角渐变
to bottom left:从右上角向左下角渐变
to bottom right:从左上角向右下角渐变
角度：
比如45度角，应该表示为：45deg
颜色取值：
1）表示颜色的单词
2）16进制颜色
3）表示颜色的函数（rgb()/rgba()/hsl()/hsla()...)
2）径向渐变(沿半径方向渐变）
background: radial-gradient(形状 渐变大小 at 位置,颜色1 百分比, ..., 颜色n 百分比);
形状：
ellipse:椭圆径向渐变（默认）
circle:圆径向渐变
渐变大小：
farthest-corner:渐变的半径长度为从圆心到离圆心最远的角（默认）
closest-side:渐变的半径长度为从圆心到离圆心最近的边
closest-corner:渐变的半径长度为从圆心到离圆心最近的角
farthest-side:渐变的半径长度为从圆心到离圆心最远的边
位置：
center:设置圆心在中心位置（默认）
top:设置圆心在顶部位置
bottom:设置圆心在底部位置
at 圆心橫坐标 圆心纵坐标: 设定圆心的位置在指定的（橫坐标，纵坐标）处
3）文字渐变
background-image: 线性渐变或径向渐变;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
box-sizing
允许你以某种方式定义某些元素，以适应指定的区域。
box-sizing: content-box/border-box （火狐和谷歌低版本需要厂商前缀）
7.变形(transform）
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。 位移效果
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。 缩放效果
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度（-360deg - 360deg）。 旋转效果
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。 变形效果
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。
matrix(a,b,c,d,e,f) 定义 2D变形，使用了6个值的矩阵。表示如下：
a c e
b d f
0 0 1
matrix用一个3行3列的矩阵表示，a和b列表示x轴，c和d列表示y轴，e和f列表示z轴
a和d表示缩放（如果没有缩放，值设为1）
b和c表示扭曲（如果没有扭曲，值为0）
e和f表示位移（如果没有位移，值为0）
如果旋转角度为θ,它会影响到a,b,c,d的值：
a = cosθ
b = sinθ
c = -sinθ
d = cosθ
如果扭曲skew(θ1,θ2)，会影响到b和c的值：
b = tanθ1
c = tanθ2
每次旋转和扭曲都会产生一个新矩阵，最终形成的多个矩阵要做乘法运算。
如果对一个元素同时有旋转、扭曲、缩放和位移，这里需要用到多个矩阵相乘，要优先考虑旋转和缩放！！！
2.transform-origin：调整元素的基点。
transform-origin: x-axis y-axis z-axis;
属性值：
x-axis ：定义视图被置于 X 轴的何处。可能的值：left，center，right，length，%。
y-axis ：定义视图被置于 Y 轴的何处。可能的值：top，center，bottom，length，%。
z-axis ：定义视图被置于 Z 轴的何处。可能的值：length。
3.perspective
让子元素获得透视效果。
perspective:length|none;
主流浏览器都不支持，谷歌要加-webkit-，或在长度后加单位。
4. transform-style
在3D空间中呈现被嵌套的元素(必须与 transform 属性一同使用)。
transform-style: flat|preserve-3d;
5.rotateZ
沿着Z轴的方向顺指针旋转。
8.transition:过渡动画
1）常规用法：
transition-property
transition-duration
transition-timing-function
transition-delay
2）简洁（复合）用法：
transition: property-name-list|all duration timing-function delay;
a）可以使用的属性有：
i)颜色：
color background-color border-color outline-color
ii)位置：
background-position left right top bottom
iii)长度：
max-height min-height max-width min-width height width
border-width margin padding outline-width outline-offset
font-size line-height text-indent vertical-align
border-spacing letter-spacing word-spacing
iv)数字：
opacity visibility z-index font-weight zoom
v)组合：
text-shadow transform box-shadow clip
vi)其它
gradient
b)duration:动画持续时间，一般以秒(s)或毫秒(ms)为单位
c)timing-function:动画函数
i)linear:匀速
ii)ease:变速（先慢后快，最后再慢）
iii)ease-in:变速（由慢到快）
iv)ease-out:变速（由快到慢）
v)ease-in-out:变速（慢速开始，慢速结束）
vi)cubic-bezier(n,n,n,n):自行设定变速，n的值在0-1之间
d)delay:动画延时时间，一般以秒(s)或毫秒(ms)为单位
9.关键帧动画
步骤：
1）设置关键帧
a)如果只有两个关键帧
@keyframes 动画名 {
0%:{样式表}
100%:{样式表}
}
或：
@keyframes 动画名 {
from:{样式表}
to:{样式表}
}
b)如果是多个关键帧
@keyframes 动画名 {
0%:{样式表}
25%:{样式表}
60%:{样式表}
...
100%:{样式表}
}
注意：这里的百分比一般是升序值，可以是0%-100%之间的做任意值，也可以是倒序。
2）实施动画
a)常规用法
animation-name：来自于@keyframes定义的动画名
animation-duration：动画持续时间，一般以秒(s)或毫秒(ms)为单位（默认为0）
animation-timing-function：动画函数
i)linear:匀速（默认值）
ii)ease:变速（先慢后快，最后再慢）
iii)ease-in:变速（由慢到快）
iv)ease-out:变速（由快到慢）
v)ease-in-out:变速（慢速开始，慢速结束）
vi)cubic-bezier(n,n,n,n):自行设定变速，n的值在0-1之间
animation-delay：动画延时时间，一般以秒(s)或毫秒(ms)为单位
animation-iteration-count：动画循环播放的次数
1)number：按设定次数循环播放（默认次数为1次）
2)infinite：一直循环播放
animation-direction：动画播放完后是否反向播放
1）normal:不反向（默认值）
2）alternate:反向
animation-play-state：动画播放或停止播放
1）paused:停止播放
2）running:播放（默认值）
b)简洁用法
animation:name duration timing-function delay iteration-count direction;