背景原点:
background-origin 图片起始位置 border-box包括边框 padding-box边框内
content-box 内容内

**background-repeat 为no-repeat才有效

背景显示区域
background-clip 超过部分被裁剪,属性同上

背景尺寸
background-size 设置背景大小,auto原图片大小,可以是数值或百分比(
表示长宽) cover缩放至能覆盖整个容器 contain缩放至某一边能覆盖容器


**多重背景格式
background:背景色 背景图 背景位置/尺寸 平铺方式 attachment 原点 显示区

**背景色只能存在一个,所以当我们要设置多个背景图又要加上背景色时,建议
背景色放在最后一个写,避免被覆盖,例如:

background:url(1.jpg) center center/100px 100px no-repeat content- 
box;
background:url(2.jpg) center center/100px 100px no-repeat content- 
box;
background:url(3.jpg) center center/100px 100px no-repeat content-box 
#cccccc;

  

*上面三组background可以写在一起,用逗号隔开


变形
transform:function(); translate()/translateX()/translateY() 2D平移
rotate() 2D旋转 scale()2D缩放 skew()斜切扭曲 translate3d() 3D位移

变形方法非常多,建议有兴趣可以去手册查看并亲自做出效果
例如,鼠标悬停时放大1.1倍:

div:hover{transform:scale(1.1,1.1);}

  

过渡动画
过渡属性:transition-property 例如background-color width height等 带
有数值的属性基本都支持过渡动画,也可以用all表示全部
过渡时间:transition-duration 过渡这个过程所用的时间
过渡函数:transition-timing-function 主要是对过渡速度的描述 默认:
ease 逐渐变慢 linear:匀速 ease-in:加速 ease-out:减速 ease-in-out:
先加速再减速 cubic-bezer(n,n,n.n):自定义
过渡延迟:transition-delay 过渡开始前的延迟时间

过渡缩写:transition:过渡属性 过渡时间 过渡函数 过渡延迟;
例如,下面过渡动画:

transition-property:all;
transition-duration:.5s;
transition-timing-function:ease-in;
transition-delay:.1s;

  

可以缩写为:

transition:all .5s ease-in .1s;