一、背景 background
1.回顾
background-color
position
image
repeat 动态显示大小
size
attachment: fixed;
2.background-origin && background-clip
background-origin :背景起源属性
content-box：盒子内容，如果有这个属性，那么盒子的背景从内容开始渲染，如果没有，默认从盒子右上角开始渲染
padding-box:图片完整的哪一张是从盒子左上角开始起源
注意：盒子的padding区域永远有背景
background-clip：背景剪裁
content-box：padding区域的背景被剪裁掉
padding-box；默认，padding区域有背景
3.background-size
改变背景尺寸 ie9开始兼容
background-size：100px 100px；
将背景图片变为100X100的大小
如果背景图不是正方形的，则会变形
background-size：100px auto；
图片不变形的情况下，宽度变为100，高度按比例自适应，宽完全可以显示完，高有可能显示一部分
background-size：cover；
图片不变形的情况下，尽可能多的显示内容，根据图片的宽高笔记和盒子的宽高比例，如果两个比例不相同，会出现两种情况 :
显示不完整，显示完整
background-size:contain;
图片不变形，按照div短边长度压缩，图片一定能展示完整，但是有可能会留白
4.多背景
一个盒子可以设置多个背景图片。 ie9开始兼容
background：url() no-repeat,url() no-repeat,url() no-repeat-x,......;
背景会按照书写顺序进行覆盖，第一个是最上边的，
background-size：auto auto，100px 200px, 200px 300px,......;
二、蒙版
可以使用图片或者渐变作为遮罩层
语法：
-webkit-mask-image:url();
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:center center;
综合：-webkit-mask:url() no-repeat center center;
注意：目前至于 -webkit-的内容支持该方法
三、倒影
语法：
-webkit-box-reflect:right 0px;
参数1：倒影的位置，above below left right
参数2：倒影的距离，2px，倒影与真实图片之间的距离
倒影加渐变
-webkit-box-reflect:right 0px -webkit-linear-gradient(top,red,blue);
四、过渡 transition
过渡：元素从一个状态转变为另一个状态的过程叫做过渡，是一个动画的转变过程，过渡需要时间，不是瞬间完成。
transition:all 1s ease 0s;
参数1：参与过渡的元素属性是什么？
all 表示所有变化的属性都参与过渡
height 高度变化
width 宽度变化
opacity 透明度变化
参数2：状态转变动画持续的时间，单位 秒(s)
参数3：过渡的缓冲描述，ease 不均匀运动 linear 匀速运动，贝塞尔曲线：cubic-beziier(0.11,1.09,0.98,0.15)
参数4：过渡延迟时间，单位 s，多少秒后开始过渡
哪些属性可以过渡？
大部分属性都可以过渡，但是背景渐变不能过渡，浮动不能过渡
注：jQuery中：animate动画不支持background-color和background-position的动画，所有这些动画要使用过渡替代
过渡什么时候触发：
当参与过渡的属性发生变化时否可以触发，比如：类名变化触发导致属性值变化时，js设置属性值变化时，伪类