CSS3基础

css3边框

border-radius:5px;   圆角
border-radius: 5px 5px 5px 5px;
box-shadow: 10px 10px 10px #cccccc;阴影

背景

border-image ： 图片边框

background-origin:content-box | padding-box | border-box;控制背景图片在盒中的位置，同时可以使用多个img

background-size:80px 60px;图片大小

background-repeat:no-repeat;平铺方式

渐变

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

从上到下

background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法（必须放在最后） */

从左到右：

background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 标准的语法（必须放在最后） */

透明度渐变：

background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法（必须放在最后） */

文本效果

text-shadow ： 文本阴影

word-wrap ： 文本换行

2d转换

translate() ： x y轴转换
rotate() ： 顺时针中心旋转
scale() ： x y轴拉伸原来的倍数
skew() ：压缩scale的反方法
matrix() ： matrix()方法和2D变换方法合并成一个。matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

3d转换

rotateX()：x轴顺时针
rotateY()：y轴顺时针

过渡

transition:width 2s;宽度样式过度时间为2s

div {
width: 100px;
height: 100px;
background: green;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}

div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

动画

多列

-moz-column-count:3; /* Firefo
4000
x */
-webkit-column-count:3; /* Safari and Chrome */
column-count:6;