css3 模块汇总（更新）

1 选择器
2 框模型

3 背景和边框

1 border-image 边框图片 例

border-image:url(border.png) 30 30 round;

2 border-radius 圆角

3 box-shadow 阴影

例

div
{
box-shadow: 10px 10px 5px #888888;
}

4 background-size  设置背景图片的大小

5 background-origin 设置背景图片的定位区域

6 background-clip:背景被裁减的位置

background-clip: border-box|padding-box|content-box;

4 文本效果

word-wrap   决定文本是否换行  word-break;决定怎么换行

word-wrap

  wrod-break;  

text-shadow:文本阴影

@font-face

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}

5 2D/3D 转换

transform:translate(50px,100px); 元素从当前位置移动 按给定的x,y坐标

transform:rotate(30deg);  元素顺时针旋转给定的角度

transform:scale(2,4) 元素的尺寸会根据给定的参数增加会减少 例子中宽会增加两倍，高会增加四倍

transform:skew(30deg,20deg) 元素根据参数翻转相应的角度

 、

以上方法 都有类似scaleX(n)这种方法 为3D转换

  transform:matrix( 0.866,0.5,-0.5,0.866,0,0) 有留个参数，把2d转换的所有方法归结到一起

3d

matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

5.5 过度

transition: with 2s;  

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
  a规定您希望把效果添加到哪个 CSS 属性上
  b规定效果的时长

例：

{width:100px;height:100px;background:yellow;transition:width 2s;-moz-transition:width 2s; /* Firefox 4 */-webkit-transition:width 2s; /* Safari and Chrome */-o-transition:width 2s; /* Opera */}div:hover{width:300px;}

transition-property: width  规定过度属性的名称

transition-duration:2s   规定过度所需的时间

transition-delay:2s  规定过度的延迟时间

transition-timing-function: 固定过度的方式

linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间

6动画

@keyframes myfirst {  定义了一个动画对象 里面有from to 两个对象或者设置百分比  webkit为@-webkit-keyframes

from{}

to{}

}

@keyframes mysecond{

10% {}

25% {}

50%{}

100%{}

}

div{

anmiation:myfirst 5s;

}

anmiation-name

anmiation-delay

anmiation-duration

anmiation-timing-function

anmiation-iteration-cout 规定播放次数 默认为1 可以选参数为n infinite

anmiation-direction 规定动画是否在下一周期逆向播放 默认为normal 可选alternate

anmiation-play-state:规定播放状态 可选为running pause （可用js控制播放暂停）

anmiation-fill-mode 规定动画时间外的状态

例

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}

7 多列布局

column-count: 3 把文本分为三列

column-gap:40px 规定列之间的间隔

column-rule：属性设置列之间的宽度、样式和颜色规则。

-moz-column-rule:4px outset #ff0000; /* Firefox */
-webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */
column-rule:4px outset #ff0000;

8 用户界面