1.浏览器私有前缀
1. CSS标准中的每个属性都要经历从草案到推荐的过程。 CSS3中属性的进展是不同的。 浏览器厂商在标准尚未明确的情况下提前支持是有风险的，因此会添加厂商前缀来区分。
2.根据不同的浏览器内核，CSS前缀也不同。
(1)、Gecko内核前缀为-moz- Firefox浏览器
(2)、Webkit内核前缀为-webkit- Google Chrome
(3)、Trident内核前缀为-ms- IE内核浏览器
(4)、Presto内核前缀为-o-，目前仅opera使用（欧朋支持）
实际使用中，通常是写完所有前缀后，在最后写上标准的。
2.圆角边框
1. border-radius（可变书写格式）
(1)、完整格式2参数8值(顺时针水平方向/垂直方向)
例如：边框半径：10px 20px 30px 40px / 10px 20px 30px 40px；
（2）当一个参数有两个值时，对角线疗效（左上右下、右上左下）
3.阴影（框阴影+文字阴影）
1.盒子阴影box-shadow
例如：盒子阴影：10px 10px 5px 红色； // 水平方向像素的阴影颜色和垂直方向像素的模糊程度
例如：盒子阴影：0px 0px 10px 10px 红色； // 水平方向像素的阴影颜色和垂直方向像素的模糊值
例如：框阴影：10px 10px 5px #ff7500 插图； // 内置阴影
2.文字阴影text-shadow
例如：文本阴影：10px 10px 3px 红色； // 水平方向像素的阴影颜色和垂直方向像素的模糊程度
可以添加多个阴影，用冒号分隔，阴影的效果会叠加。
盒子阴影可以设置多个扩展属性来叠加绘制彩虹。
四、CSS3渐变（显示两种或多种指定颜色之间的平滑过渡）
设置渐变不能给出背景颜色background-color，它实际上属于背景图片
1. 线性渐变
下/上/左/右/对角线方向
例如：背景：线性渐变（方向，颜色停止1，颜色停止2，...）
例如：背景：线性渐变（180度，蓝色，黄色）；
例如：背景：线性渐变（到左上角，蓝色，黄色）；
例如：背景：重复线性渐变（蓝色20％，黄色40％）； // 重复渐变
2. 径向渐变（由中心定义）
默认情况下，渐变的重心为center表示中心点，渐变的形状为ellipse（椭圆形）
值：形状 可能的值：圆和椭圆 圆/椭圆
中心的可能值：at center center
语法：at xy 是以左上角原点为参考点
它可以以像素或比率为单位。
尺寸的可能值：最近侧
最远侧
最近角点
最远的角 最父亲的角
例如：背景：redial-gradient(center,shape,size,startColor,...,lastColor); // 中心点形状、大小、颜色
五、转换Transform（2D转换）
CSS3中的变换允许元素进行旋转、缩放、移动或倾斜，分为2D变换和3D变换。
Transform中的属性由函数定义，格式transform:函数名(x值,y值)包括
translate() 移动，接收一个px值支持一个参数（水平方向）
scsale() 缩放值为1时不改变，接收两个值时水平和垂直独立缩放。缩放时div中的内容也会缩放
rotate() 旋转20度 旋转20度仅接受一个参数旋转角度。
skew()倾斜可以接受一两个参数：eg:40deg倾斜角度
6.Transform3D（3D转换）（以下方法提供单独的xyz函数）
translate3d() 移动
scale3d() 缩放
rotate3d() 旋转
补充：透视透视呈现伪3D效果。
Transform中的属性方法可以一致使用。
七、transition过渡（让CSS属性在一段时间内平滑过渡）
1. 明确四个要素
(1)、transition-property(过渡属性)eg:背景、颜色…多个属性用冒号分隔none|all
(2)、过渡所需时间(transition-duration)默认为0，不会有疗效
(3)、过渡函数（transition-timing-function）ease|linear|ease-in|ease-out|ease-in-out|ease-in-out
ease：默认值，指定慢速开始，然后快速，最后慢速结束
线性：匀速
ease-in：缓慢启动以加速效果
ease-out：慢端减速效果
ease-in-out：慢速开始和结束先加速后减速
（4）过渡延迟时间（transition-delay）：执行过渡效果需要多长时间例如：1s
2. 触发转换
由行为触发，例如：用户单击鼠标悬停...
速记示例：transition: all 2s 0s escape; // 标签执行时间延迟转换函数
八、动画动画
通过关键帧控制动画的每一步css3文字动画效果，使元素可以逐渐从一种风格变为另一种风格，实现复杂的动画效果。
1.@keyframes：用于声明动画并指定关键帧
语法：@关键帧名称{
来自|0%{CSS 样式}
parcent{CSS 样式}
至|100%{CSS 样式}
2、动画属性用于控制动画，调用@keyframes定义的动画，并设置动画属性（时间、次数等）
语法：动画：名称持续时间-函数延迟迭代-计数方向；
动画名称 完成时间 功能 延迟时间 执行次数 方向
动画子属性：
动画名称：
动画持续时间：
动画时间函数：
动画延迟：
animation-iteration-count: value|infinite (无限播放)
动画方向：正常|交替（奇数正常播放css3文字动画效果，偶数向后播放）；
animation-fill-mode: dorwards（动画在最后一帧停止）|none；
动画播放状态：暂停|运行； 动画是否正在运行或暂停
