4 动画
transform:translate(px)/rotate(deg)/scale(2)/skew()/matrix()
备注:IE10、Firefox 以及 Opera 支持 transform 属性
Chrome 和 Safari 需要前缀 -webkit- Internet Explorer 9 需要前缀 -ms-
5 动画3D
transform-origin 允许你改变被转换元素的位置。赋值需要掌握 关键词!
transform-origin: x-axis y-axis z-axis; // x-axis 定义视图被置于 X 轴的何处。可能的值：
transform-style 规定被嵌套元素如何在 3D 空间中显示!!!
perspective 透视点 !!!
backface-visibility 定义元素在不面对屏幕时是否可见
backface-visibility: hidden;
6 过度transition
备注:
IE10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
注释：IE9 以及更早的版本，不支持 transition 属性。
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 不同的属性值需要知道.
transition-delay 规定过渡效果何时开始。默认是 0。
7 帧动画
eg:
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
8 流式布局 媒体查询 响应式
流式布局:百分比布局, 所有尺寸参照父级 其中margin和padding特殊 参照宽度
媒体查询 @media screen () and () 响应式: viewport 统一写法
<!--移动端响应式的通用代码！-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
实例注意：
text-shadow
水平阴影、垂直阴影、模糊距离，以及阴影的颜色
text-shadow: 5px 5px 5px #FF0000;
box-shadow属性适用于盒子阴影
box-shadow: h-shadow y-shadow blur spread color inset;
水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 从外层的阴影（开始时）改变阴影内侧阴影
div{box-shadow: 10px 10px 5px #888888;}
transform-origin: x-axis y-axis z-axis; x-axis 定义视图被置于 X 轴的何处。
多列
column-count:n;
column-gap:10px;间距
column-rule: 2px solid red; //相当于border 分隔线
resize: none|both|horizontal|vertical;
horizontal 用户可调整元素的宽度。
vertical 用户可调整元素的高度。
div{resize:both;
overflow:auto;
}
