css3

CSS3 模块包括：
选择器
框模型
背景和边框
文本效果
2D/3D 转换
动画
多列布局
用户界面
******************************************************************************
border-image:url(border.png) 30 30 round;
box-shadow：左右 上下 模糊 大小 颜色 【text-shadow】
background-size:20px 20px; 属性规定背景图片的尺寸。
background-origin :content-box/padding-box/border-box;属性规定背景图片的定位区域【background-position】
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
word-wrap ：强制换行
text-overflow:ellipsis；省略号
text-overflow:clip；放不下的修剪掉了

20em；不出现半截汉字

.box{
200px;
white-space:nowrap;
overflow:hidden;
/*text-overflow:ellipsis;*/
text-overflow:clip;
}

2D 转换方法：transform：
translate(x,y) 平移
translatex(N)
translatey(N)
rotate(度数) 旋转 顺时针 +
scale(x,y) 缩放 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
scaleX(n)
scaleY(n)
skew(X度，Y度) 斜切翻转
transform: skew(30deg,20deg); 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
skewX(angle)
skewY(angle)
matrix()

3D转换方法：
perspective: 500;景深 具有透视效果【最大元素写】
transform-origin：旋转中心
transform-style: preserve-3d;让子元素以3d形式呈现
perspective-origin: 10% 10%;【最大元素写 表示在什么位置看动画】
backface-visibility：hidden;背面不可见

过度：
transition: width 2s, height 2s, transform 2s;

动画:
@keyframes
必须定义动画的名称和时长
@keyframes myfirst{
0% {background: red; left:0px; top:0px;} 【位置也可调整】
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

div{
animation-name: myfirst;
animation-duration: 5s; 完成一个周期所花费的秒或毫秒。默认是 0
animation-timing-function: linear;
animation-delay: 2s; 何时开始。默认是 0。
animation-iteration-count: infinite; 动画被播放的次数。默认是 1。
animation-direction: alternate; 否在下一周期逆向地播放。默认是 "normal"。
animation-play-state: running;正在运行或暂停。默认是 "running"。
}
简写：animation: myfirst 5s linear 2s infinite alternate;

列：报纸模式 http://www.w3school.com.cn/css3/css3_multiple_columns.asp
column-count
column-gap 每列间距
column-rule 每列之间的分割线