在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 方法

  函数	描述
  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 转换元素的透视视图。

  css3 过渡

  就是把变化过程显示出来。

  必须规定两项内容：{

  规定您希望吧效果添加到哪个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 规则和所有动画属性：

  属性	描述	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

  css3 多列

  column-count：规定元素应该被分隔的列数

  column-gap：规定列之间的间隔

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

  新的多列属性

  下面的表格列出了所有的转换属性：

  属性	描述	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

  css3 用户界面

  新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等
  

  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