在css3中添加属性时，不同浏览器需要加上相应的前缀，如：-moz-是Firefox的前缀，-webkit-是chrome&&Safari的前缀，-o-是opera浏览器的前缀。才能正常的在相应的浏览器中显示出来。
css3被划分为模块
最重要的模块就是选择器，框模型，背景和边框，文本效果，2D/3D转换，动画，多列布局，用户界面。
css边框：(Firefox、Chrome 以及 Safari 支持所有新的边框属性。)
能创建圆角边框，向矩形添加阴影，使用图片来绘制边框；
border-radius：属性用来创建圆角 只需要给该属性一个像素就可以给边框一个圆角
p{
border：2px solid;
border-radius:25px;
-moz-border-radius:25px;
}
box-shadow:属性用于向方框添加阴影
eg.<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+ZGl2ezwvcD4KPHA+Ym94LXNoYWRvdzoxMHB4IDEwcHggNXB4ICM4ODg4ODg7PC9wPgo8cD59PC9wPgo8cD48aW1nIHNyYz0="" alt="\">
border-image:属性，可以用图片来创建边框：
p
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
css背景
background-size：规定背景图片的尺寸。
background-origin：规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。
css3文本效果
text-shadow：向文本添加阴影。
word-warp：属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分；
允许对长单词进行拆分，并换行到下一行：
p {word-wrap:break-word;}
css3字体
@font-face
通过 CSS3，web 设计师可以使用他们喜欢的任意字体。
当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。
您“自己的”的字体是在 CSS3 @font-face 规则中定义的。
css3 2D转换- translate() 元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
- rotate() 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
- scale() 元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
- skew() 元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
- matrix() 把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素
css3 3D转换
rotateX（）元素围绕其 X 轴以给定的度数进行旋转
rotateY（）元素围绕其 Y 轴以给定的度数进行旋转。
参考属性表
转换属性
下面的表格列出了所有的转换属性：
属性 描述 CSS asp" title="CSS3 transform 属性">transform 向元素应用 2D 或 3D 转换。 3 transform-origin 允许你改变被转换元素的位置。 3 transform-style 规定被嵌套元素如何在 3D 空间中显示。 3 perspective 规定 3D 元素的透视效果。 3 perspective-origin 规定 3D 元素的底部位置。 3 backface-visibility 定义元素在不面对屏幕时是否可见。 3 2D Transform 方法
css3 过渡函数 描述 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 转换元素的透视视图。 就是把变化过程显示出来。
必须规定两项内容：{
规定您希望吧效果添加到哪个css属性上；
规定效果的时长；
}
过渡属性
下面的表格列出了所有的转换属性：
属性 描述 CSS transition 简写属性，用于在一个属性中设置四个过渡属性。 3 transition-property 规定应用过渡的 CSS 属性的名称。 3 transition-duration 定义过渡效果花费的时间。默认是 0。 3 transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3 transition-delay 规定过渡效果何时开始。默认是 0。 3
css3 动画
@keyframes规则
在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
和过渡属性一样通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：1。规定动画的名称 2.规定动画的时长。
用百分比在显示过程中你所设置的样式。
CSS3 动画属性
下面的表格列出了 @keyframes 规则和所有动画属性：
css3 多列属性 描述 CSS @keyframes 规定动画。 3 animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3 animation-name 规定 @keyframes 动画的名称。 3 animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3 animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3 animation-delay 规定动画何时开始。默认是 0。 3 animation-iteration-count 规定动画被播放的次数。默认是 1。 3 animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3 animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3 animation-fill-mode 规定对象动画时间之外的状态。 3 column-count：规定元素应该被分隔的列数
column-gap：规定列之间的间隔
column-rule：设置列之间的宽度、样式和颜色规则。
新的多列属性
下面的表格列出了所有的转换属性：
css3 用户界面属性 描述 CSS column-count 规定元素应该被分隔的列数。 3 column-fill 规定如何填充列。 3 column-gap 规定列之间的间隔。 3 column-rule 设置所有 column-rule-* 属性的简写属性。 3 column-rule-color 规定列之间规则的颜色。 3 column-rule-style 规定列之间规则的样式。 3 column-rule-width 规定列之间规则的宽度。 3 column-span 规定元素应该横跨的列数。 3 column-width 规定列的宽度。 3 columns 规定设置 column-width 和 column-count 的简写属性。 3 新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等
rasize：规定是否可由用户调整元素尺寸
box-sizing：允许您以确切的方式定义适应某个区域的具体内容。
outline-offset：对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
区别轮廓和边框：{
轮廓不占用空间；
轮廓可能是非矩形;
}
新的用户界面属性
下面的表格列出了所有的转换属性：
属性 描述 CSS appearance 允许您将元素设置为标准用户界面元素的外观 3 box-sizing 允许您以确切的方式定义适应某个区域的具体内容。 3 icon 为创作者提供使用图标化等价物来设置元素样式的能力。 3 nav-down 规定在使用 arrow-down 导航键时向何处导航。 3 nav-index 设置元素的 tab 键控制次序。 3 nav-left 规定在使用 arrow-left 导航键时向何处导航。 3 nav-right 规定在使用 arrow-right 导航键时向何处导航。 3 nav-up 规定在使用 arrow-up 导航键时向何处导航。 3 outline-offset 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。 3 resize 规定是否可由用户对元素的尺寸进行调整。 3
