1、浏览器前缀
浏览器厂商以前就一直在实时CSS3，但它还未成为真正的标准。为此，当有一些CSS3样式与法还在波动的时候，他们提出了针对不同浏览器的前缀，来解决兼容性问题。
即：CSS3去兼容不同的浏览器，针对旧的浏览器做兼容，新浏览器基本不需要添加这个前缀了。
浏览器 内核 前缀
IE Trident -ms-
Firefox Gecko -moz-
Opera Presto -o-
Chrome Webkit -webkit-
Safari Webkit -webkit-
Opera、Chrome Blink
注：一般自动生成
2、transition过渡
*可以合在一起写（复合样式）:要注意顺序（按以下顺序）
transition-property：规定设置过渡效果的CSS属性的名称
transition-duration：规定完成过渡效果需要多少秒或者毫秒
transition-delay：定义过渡效果何时开始 (即可以延迟（数值为正数）也可以提前（数值为负数）)
transition-timing-function：规定速度效果的速度曲线：默认值ease，具体网站自己设置贝塞尔属性
注：transition属性要加在div中不要加在hover中否则移入有过渡属性，移出就没有了
3、transform变形
translate:位移
translateX：正值向右，负值向左
translateY:正值向下，负值向上
translateZ(3d)
scale:縮放
值为一个比较值，正常大小为1，会以当前元素中心点进行缩放
scaleX
scaleY
scaleZ
rotate：旋转（旋转的值：单位是角度：deg;弧度：rad）
rotateX （3d）
rotateY （3d）
rotateZ （和rotate是等价关系，正值按顺时针旋转，负值按逆时针旋转）
skew:斜切
skewX:单位也是角度，正值向左倾斜，负值向右倾斜
skewY
*要注意写参数时是用逗号，比如skew（）写x轴y轴坐标的时候；而写一个标签的多个属性的时候一般用空格隔开
*补充说:一般属性后面的括号里写参数用逗号，没有括号用空格如：transform-origin: 0 0;
transform的注意事项：
1、变形操作不会影响到其他元素。
2、变形操作只能添加给块元素，不能添加给内联元素。(要添加给内联元素时需添加：display:block;把内联转化为块)
3、复合写法：可以同时添加多个变形操作。
执行是有顺序的：先执行后面的操作，再执行前面的操作；后面的操作可能会受前面操作的影响，如translate
translate会受到rotate、scale、skew的影响：比如transform: scale(.5) translate(100px,0);由于scale的影响，translate只能移动100*0.5=50px的距离;
再如；transform:rotate(45deg) translate(100px,0);受rotate影响实际上translate是向右下角45度方向移动的100px
4、transform-origin：变更属性变化中心点，有X和Y，属性值可以是数值也可以是单词，可以指定超出容器范围的点作为中心点。這很重要，设计首先就要确定元素变化的终点
*CSS中标签的最后一个属性值可以不加分号
*练习变形的列表：要在父元素中移动子元素要在父元素中添加相对定位属性：position：relative；在子类元素中添加绝对定位：position：absolute；而且，子类元素中添加的left：、top：等属性移动的是作为零点的图片左上角，且left正值表示向右移动，以此类推。例如：
.list .list_photo{float: left; 112px;height: 77px; margin: 10px 9px 0 5px;position:relative;}
.list .list_photo .list_photo_box{ 92px;height: 57px;border: 1px white solid;position: absolute;left: 9px;top: 9px;}
启示：要在图片上面显示框或者文字，不需要用float只需要使用position移动其位置即可
4、animation动画（CSS3）
animation-name：设置动画的名字（自定义的）
animation-duration：动画的持续时间
animation—delay：动画的延迟时间
animation—iteration-count：动画的重复次数，默认值就是1，infinite无限次数
animation-timing-function：动画的运动形式
通过@Keyframes标签组合来实现动画：
/* from表示开始，to表示结束可写为百分数 */
@keyframes myBox {
from{transform:translate(0,0)}
to{transform:translate(200px,0);}
}
注：
1、运动结束后，默认情况下会停留在起始位置。
2、from->0%,to->100% 采用百分数可以在Keyframe中添加大量的关键帧，实现较为复杂的动画
复合样式的写法：
animation:myBox 4s 1s infinite linear;
第一个属性为name、第二个为持续时间、第三个为延迟时间、其他的不分顺序
*让图片在父容器中居中可以使用定位的方式:
ul li img{position: absolute;left: 50% 50%;}
需要注意要在其父容器中添加相对定位：position:relative;此时子容器默认在父容器的左上角坐标为（0,0）
再通过left等属性改变位置
*可以通过在父元素中写position：relative；多个子元素中写position：absolute：实现多个子元素重叠，初始位置都是父容器左上角
*分清楚两种写法：
ul li:hover img：鼠标移上li时img作用
ul li img:hover:鼠标移到img上时img作用
两者区别在于如果img嵌套在li里面且li空间比img大则第一种写法，处罚范围更大，更稳定，不会出现上下抖动问题。
animation-fill-mode：规定动画播放之前或之后，其动画效果是否可见，none（默认值）：运动结束只有会回到初始位置，在延迟的情况下，让0%在延迟后生效
backwards：在延迟情况下，让0%再延迟前生效
forwards：在运动结束之后，停在结束的位置
both：backwards和forwards同时生效
animation-direction：属性定义是否应该轮流反向播放动画，
alternate：一次正向（0%~100%），以此反向（100%~0%）
reverse:永远都是反向，从100%~0%
normal（默认值）：永远都是正向，从0%~100%
*以上两个样式都可以复合的写在animation上。
5、animate.css
一款强大的预设css3动画库。
官方地址：https://daneden.github.io/animate.css/
基本使用：
animated：基类（基础的样式，每个动画效果都需要加）
infinite：动画的无限次数
示例：
<img src="../img/风扇.png" alt="" class="animated tada infinite" >
class里面的animated和infinite是固定的根据需求更换动画样式(tada)，具体效果属性可以上官网查看
6、transform3D相关属性
rotateX（）：正值向上翻转
rotateY（）：正值向右翻转 简记：无论x、y正值都会往第一象限里面转
rotateZ（）：正值向前，负值向后翻转
scaleZ（）：立体元素
* .box1:hover .box2{}该语句表示当鼠标移入box1时给box2添加效果
3D相关属性
perspective(景深)：离屏幕多远的距离去观察元素，值越大(离屏幕越远3D效果越差)幅度就越小。(一般加在最外层容器) 即：设置物件离照相机的远近
perspective-origin：景深-基点位置，观察元素的角度。 即：设置照相机照射物件的角度
transform-origin：x、y、z
transform-style：3D空间(内层) 一般外层加景深，内层加3D空间(也可以加载在同一标签上)
flat（默认值2d）、preserve-3d（3d，产生一个三维空间）
backface-visibility：背景隐藏,即如果立方体每个面是透明的可以看到里面
hidden、visible（默认值）
3D写法：
scale3d（）：三个值x y z
translate3d():三个值x y z
rotate3d（）：四个值：第一个值：0|1（1和0分别表示x轴是否添加旋转角度） 第二个值：0|1（1和0分别表示y轴是否添加旋转角度） 第三个值：0|1（1和0分别表示z轴是否添加旋转角度） 第四个值：deg旋转的角度
*令li容器中的文字上下居中：容器高=行高： .box ul li{ 100px;height: 100px;line-height: 100px;text-align: center;}
*transform-origin:bottom;把变化基点设置为下面那条边
*transform-origin: center center -50px;(z轴只能写数值不能写单词)
7、css3提供的背景扩展样式：
background-size：背景图片的尺寸大小
cover：覆盖：覆盖满容器而不管图片是否完整
contain：包含:在保持图片完整的情况下，使容器中的图片尽量大
background-origin：背景图的填充位置
padding-box（默认）
border-box:起始点在盒子左上角
content-box：起始点在内容区域
background-clip：背景图的裁切方式(位置)
padding-box：在padding外边界裁切（出了padding的部分裁切掉）
border-box（默认）：
content-box：即出了内容区域的部分就裁切
注：可以在background标签里复合写：注意顺序，第一个content-box指的是origin，，第二个才是clip：
background: url('../img/电脑.png') content-box content-box;
8、css3中的渐变
linear-gradient()：线性渐变:是值，需要添加到background-image属性上
point||angle
color
percentage
指定方向：background-image: linear-gradient(to right bottom, red,blue,yellow,green);从右下到左上
指定角度：background-image: linear-gradient(45deg,yellow,green);界面的0度实在界面的下边，正值会按照顺时针，负值逆时针旋转
渐变范围：background-image: linear-gradient(yellow 25%,green 75%);界面默认从上往下分别为0%~100%，利用等分不渐变，可以在一个容器里添加多种颜色。格式为：
linear-gradient(to right,#999 25%,#080 25%,#080 50%,#999 50%,#999 75%,#080 75%)
0~25%为#999；25%~50%为#080；50%~75%为#999；75%~100%为#080
radial-gradient()：径向渐变(从容器中心点向四周渐变) 用的不多，属性设置与线性渐变差不多
point
color
percentage
9、字体图标
font-face是css3中的一个模块，他主要是把自己定义的字体嵌入到你的网页中，
好处：
1、可以非常方便的改变大小和颜色
2、放大后不会失真
3、减少请求次数和提高加载速度
4、简化网页布局
5、减少设计师和前端工程师的工作量
6、可以使用计算机没有提供的字体
使用@font-face语法实现
像.woff等文件都是做兼容平台处理的，max、linux等，所以不用关心
10、字体图标？
阿里巴巴矢量图标库：
https://www.iconfont.cn:提供大量免费的字体图标
用法：
1、引入css文件：
<link rel="stylesheet" href="../css/iconfont.css">
2、在标签类中添加类名：
<span class="iconfont iconcaidan"></span> iconfont为引入的css文件名字，iconcaidan为该css文件里的具体图标类名
彩色图标的用法：（要把js文件也考过去）
1、引入js文件：
<script src="../css/iconfont.js"></script>
2、添加样式。3、添加标签（具体见demo的介绍）
自定义字体图标：
https://icomoon.io/app:在线生成字体图标