css3新特性

1、边框

• border-radius：圆角

• box-shadow：阴影

• border-inage：使用图片绘制边框

  div
  {
  box-shadow: 10px 10px 5px #888888; //右 下 虚化
  }
  div
  {
  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 */
  }

2、背景

• background-size 规定背景图片的尺寸
• background-origin 属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。

3、文本效果

text-shadow
word-wrap属性允许您允许文本强制文本进行换行

4、字体

@font-face
必需：font-family src
可选：font-stretch font-style font-weight unicode-range

5、2D 转换transform

您将学到如下 2D 转换方法：

translate()：通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数

rotate()
scale()
skew()：通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
matrix()matrix() 方法把所有 2D 转换方法组合在一起。

matrix()： 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

6、3D 转换

CSS3 允许您使用 3D 转换来对元素进行格式化。

学到其中的一些 3D 转换方法：

rotateX()
rotateY()

7、CSS3 过渡transition

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

div
{
transition: width 2s;
-moz-transition: width 2s;	/* Firefox 4 */
-webkit-transition: width 2s;	/* Safari 和 Chrome */
-o-transition: width 2s;	/* Opera */
}

8、CSS3 @keyframes 规则

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}
@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;}
}

@-moz-keyframes myfirst /* Firefox */
{
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: 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;
}

CSS3动画属性
@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 规定对象动画时间之外的状态。

9、css3选择器

CSS选择器复习
通用选择器：* 选择到所有的元素
选择子元素：> 选择到元素的直接后代(第一级子元素)
相邻兄弟选择器：+ 选择到紧随目标元素后的第一个元素
普通兄弟选择器：~ 选择到紧随其后的所有兄弟元素

CSS3结构选择器
:nth-child 选择指定索引处的子元素
nth-child(n) 父元素下的第n个子元素
nth-child(odd) 奇数子元素(同nth-child(2n-1))
nth-child(even) 偶数子元素(同nth-child(2n))
nth-child(an+b) 公式
(nth-child从1开始)
:nth-last-child(n) 倒数第n个子元素
:nth-of-type(n) 父元素下的第n个指定类型的子元素
:nth-last-of-type 父元素下的倒数第n个指定类型的子元素
:first-child 选择父元素下的第一个子元素
:last-child 选择父元素下的最后一个子元素
:only-child 选择父元素下唯一的子元素
:only-of-type 选择父元素下指定类型的唯一子元素
:root 选择文档的根目录，返回html

10、css3渐变

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义
语法：
background: linear-gradient(direction, color-stop1, color-stop2, …);
#grad {
/* Safari 5.1 - 6.0 /
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/ Opera 11.1 - 12.0 /
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/ Firefox 3.6 - 15 /
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/ 标准的语法 */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}