CSS3 简介

CSS3 完全向后兼容，因此您不必改变现有的设计。浏览器通常支持 CSS2。

CSS3 模块

CSS3 被划分为模块。

其中最重要的 CSS3 模块包括：

选择器
框模型
背景和边框
文本效果
2D/3D 转换
动画
多列布局
用户界面

CSS3 边框

通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框

下面您将学到以下边框属性：

border-radius
box-shadow
border-image

CSS3 圆角边框

在 CSS3 中，border-radius 属性用于创建圆角：

div {
  border:2px solid;
  border-radius:25px;
  -moz-border-radius:25px; /* Old Firefox */
}

属性是一个简写属性，用于设置四个 border-*-radius 属性。

1	border-radius: 1-4 length\|% / 1-4 length\|%;

按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。
值

length 定义圆角的形状。
% 以百分比定义圆角的形状。
1
border-radius:2em;

等价于：

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

1	border-radius: 2em 1em 4em / 0.5em 3em;

等价于

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

CSS3 边框阴影

在 CSS3 中，box-shadow 用于向方框添加阴影：

1
2
3

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

语法

1	box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

CSS3 边框图片

通过 CSS3 的 border-image 属性，您可以使用图片来创建边框：

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 */
}

border-image 属性是一个简写属性，用于设置以下属性：

border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
如果省略值，会设置其默认值。
使用 border-image-* 属性来构造漂亮的可伸缩按钮！
1
2
3
div {
border-image: none 100% 1 0 stretch;
}

CSS3 背景

CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制。
您将学到以下背景属性：
background-size
background-origin
您也将学到如何使用多重背景图片。

CSS3 background-size 属性

background-size 属性规定背景图像的尺寸。

默认值： auto

语法

1	background-size: length\|percentage\|cover\|contain;

值

length

设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 “auto”。

percentage
以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 “auto”。
cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。

contain
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

div {
  background:url(bg_flower.gif);
  -moz-background-size:63px 100px; /* 老版本的 Firefox */
  background-size:63px 100px;
  background-repeat:no-repeat;
}

div {
  background:url(bg_flower.gif);
  -moz-background-size:40% 100%; /* 老版本的 Firefox */
  background-size:40% 100%;
  background-repeat:no-repeat;
}

CSS3 background-origin 属性

background-origin 属性规定 background-position 属性相对于什么位置来定位。

注释：如果背景图像的 background-attachment 属性为 “fixed”，则该属性没有效果。

默认值： padding-box

padding-box 背景图像相对于内边距框来定位。测试
border-box 背景图像相对于边框盒来定位。测试

content-box 背景图像相对于内容框来定位。

div {
  background:url(bg_flower.gif);
  background-repeat:no-repeat;
  background-size:100% 100%;
  -webkit-background-origin:content-box; /* Safari */
  background-origin:content-box;
}

CSS3 多重背景图片

1
2
3

body { 
  background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}

background-clip 属性

属性规定背景的绘制区域。
默认值： border-box

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

border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。

CSS3 文本效果

CSS3 包含多个新的文本特性。
在本章中，您将学到如下文本属性：

text-shadow
word-wrap

CSS3 文本阴影

在 CSS3 中，text-shadow 可向文本应用阴影。
您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：

1
2
3

h1 {
  text-shadow: 5px 5px 5px #FF0000;
}

CSS3 自动换行

单词太长的话就可能无法超出某个区域自动换行
在 CSS3 中，word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分。

1
2
3

p {
  word-wrap:break-word;
}

暂略???
hanging-punctuation 规定标点字符是否位于线框之外。 3
punctuation-trim 规定是否对标点字符进行修剪。 3
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3
text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。 3
text-outline 规定文本的轮廓。 3
text-overflow 规定当文本溢出包含元素时发生的事情。 3
text-shadow 向文本添加阴影。 3
text-wrap 规定文本的换行规则。 3
word-break 规定非中日韩文本的换行规则。 3
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 3

CSS3 @font-face 规则

在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。

通过 CSS3，web 设计师可以使用他们喜欢的任意字体。

当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。

您“自己的”的字体是在 CSS3 @font-face 规则中定义的。

使用您需要的字体

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

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

  div {
    font-family:myFirstFont;
  }
</style>

使用粗体字体
您必须为粗体文本添加另一个包含描述符的 @font-face：

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

文件 “Sansation_Bold.ttf” 是另一个字体文件，它包含了 Sansation 字体的粗体字符。

只要 font-family 为 “myFirstFont” 的文本需要显示为粗体，浏览器就会使用该字体。

通过这种方式，我们可以为相同的字体设置许多 @font-face 规则。

CSS3 字体描述符

CSS3 2D 转换

CSS3 转换

转换是使元素改变形状、尺寸和位置的一种效果。

您可以使用 2D 或 3D 转换来转换您的元素。

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

2D 转换

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

translate()
rotate()
scale()
skew()
matrix()

translate() 方法

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

div {
  transform: translate(50px,100px);
  -ms-transform: translate(50px,100px);		/* IE 9 */
  -webkit-transform: translate(50px,100px);	/* Safari and Chrome */
  -o-transform: translate(50px,100px);		/* Opera */
  -moz-transform: translate(50px,100px);		/* Firefox */
}

值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

rotate() 方法

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

div {
  transform: rotate(30deg);
  -ms-transform: rotate(30deg);		/* IE 9 */
  -webkit-transform: rotate(30deg);	/* Safari and Chrome */
  -o-transform: rotate(30deg);		/* Opera */
  -moz-transform: rotate(30deg);		/* Firefox */
}

值 rotate(30deg) 把元素顺时针旋转 30 度。

scale() 方法

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

div {
  transform: scale(2,4);
  -ms-transform: scale(2,4);	/* IE 9 */
  -webkit-transform: scale(2,4);	/* Safari 和 Chrome */
  -o-transform: scale(2,4);	/* Opera */
  -moz-transform: scale(2,4);	/* Firefox */
}

值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

skew() 方法

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

div {
  transform: skew(30deg,20deg);
  -ms-transform: skew(30deg,20deg);	/* IE 9 */
  -webkit-transform: skew(30deg,20deg);	/* Safari and Chrome */
  -o-transform: skew(30deg,20deg);	/* Opera */
  -moz-transform: skew(30deg,20deg);	/* Firefox */
}

值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

matrix() 方法

matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
使用 matrix 方法将 div 元素旋转 30 度：

div {
  transform:matrix(0.866,0.5,-0.5,0.866,0,0);
  -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);		/* IE 9 */
  -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Firefox */
  -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Safari and Chrome */
  -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);		/* Opera */
}

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

transform transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
默认值： none
语法
1
transform: none|transform-functions;

none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。

transform-origin 允许你改变被转换元素的位置。
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
注释：该属性必须与 transform 属性一同使用。
默认值：50% 50% 0
语法
1
transform-origin: x-axis y-axis z-axis;

值|描述

x-axis 定义视图被置于 X 轴的何处。可能的值：left、center、right、length、%
y-axis
定义视图被置于 Y 轴的何处。可能的值：top、center、bottom、length、%
z-axis
定义视图被置于 Z 轴的何处。可能的值：length

div {
  transform: rotate(45deg);
  transform-origin:20% 40%;

  -ms-transform: rotate(45deg); 		/* IE 9 */
  -ms-transform-origin:20% 40%; 		/* IE 9 */

  -webkit-transform: rotate(45deg);	/* Safari 和 Chrome */
  -webkit-transform-origin:20% 40%;	/* Safari 和 Chrome */

  -moz-transform: rotate(45deg);		/* Firefox */
  -moz-transform-origin:20% 40%;		/* Firefox */

  -o-transform: rotate(45deg);		/* Opera */
  -o-transform-origin:20% 40%;		/* Opera */
}

CSS3 3D 转换

3D 转换

CSS3 允许您使用 3D 转换来对元素进行格式化。
您将学到其中的一些 3D 转换方法：

rotateX()

rotateY()

rotateX() 方法

通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

div {
  transform: rotateX(120deg);
  -webkit-transform: rotateX(120deg);	/* Safari 和 Chrome */
  -moz-transform: rotateX(120deg);	/* Firefox */
}

rotateY() 旋转

通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

div {
  transform: rotateY(130deg);
  -webkit-transform: rotateY(130deg);	/* Safari 和 Chrome */
  -moz-transform: rotateY(130deg);	/* Firefox */
}

transform-style 属性

使被转换的子元素保留其 3D 转换：

div {
  transform: rotateY(60deg);
  transform-style: preserve-3d;
  -webkit-transform: rotateY(60deg);	/* Safari 和 Chrome */
  -webkit-transform-style: preserve-3d;	/* Safari 和 Chrome */
}

定义和用法

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
注释：该属性必须与 transform 属性一同使用。
默认值： flat
语法

1	transform-style: flat\|preserve-3d;

值|描述

flat 子元素将不保留其 3D 位置。
preserve-3d 子元素将保留其 3D 位置。
perspective 属性
设置元素被查看位置的视图：
1
2
3
4
div {
perspective: 500;
-webkit-perspective: 500; /* Safari 和 Chrome */
}

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
注释：perspective 属性只影响 3D 转换元素。
提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。
默认值： none
语法

1	perspective: number\|none;

值|描述

number 元素距离视图的距离，以像素计。
none 默认值。与 0 相同。不设置透视。
perspective-origin 属性

设置 3D 元素的基点位置：

div {
  perspective:150;
  perspective-origin: 10% 10%;
  -webkit-perspective:150;	/* Safari 和 Chrome */
  -webkit-perspective-origin: 10% 10%;	/* Safari 和 Chrome */
}

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。

注释：该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素。
默认值： 50% 50%
语法

1	perspective-origin: x-axis y-axis;

值|描述

x-axis 定义该视图在 x 轴上的位置。默认值：50%。可能的值：left、center、right、length、%
y-axis 定义该视图在 y 轴上的位置。默认值：50%。可能的值：top、center、bottom、length、%

backface-visibility 属性

定义当元素不面向屏幕时是否可见。
如果在旋转元素不希望看到其背面时，该属性很有用。
默认值： visible
语法
backface-visibility: visible|hidden;
值|描述

visible 背面是可见的。
hidden 背面是不可见的。
CSS3 过渡
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
它如何工作？
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
规定您希望把效果添加到哪个 CSS 属性上

规定效果的时长
应用于宽度属性的过渡效果，时长为 2 秒：

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

注释：如果时长未规定，则不会有过渡效果，因为默认值是 0。
效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时：
例如，当鼠标指针悬浮于 <div> 元素上时：

1
2
3

div:hover {
  width:300px;
}

注释：当指针移出元素时，它会逐渐变回原来的样式。

多项改变

如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：

向宽度、高度和转换添加过渡效果：

div {
  transition: width 2s, height 2s, transform 2s;
  -moz-transition: width 2s, height 2s, -moz-transform 2s;
  -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
  -o-transition: width 2s, height 2s,-o-transform 2s;
}

过渡属性

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

transition 属性

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

transition 属性

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property
transition-duration
transition-timing-function
transition-delay
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
默认值： all 0 ease 0
语法
transition: property duration timing-function delay;
transition-property 属性
把鼠标指针放到 div 元素上，会产生带有平滑改变元素宽度的过渡效果：
1
2
3
4
5
6
div {
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari 和 Chrome */
-o-transition-property:width; /* Opera */
}

transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。
默认值： all
语法
transition-property: none|all|property;
值|描述
none 没有属性会获得过渡效果。
all 所有属性都将获得过渡效果。
property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

transition-duration 属性

让过渡效果持续 5 秒：

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

定义和用法
transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。
默认值： 0
语法

1	transition-duration: time;

值|描述
time 规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。

transition-timing-function 属性

以相同的速度从开始到结束的过渡效果：

div {
  transition-timing-function: linear;
  -moz-transition-timing-function: linear; /* Firefox 4 */
  -webkit-transition-timing-function: linear; /* Safari 和 Chrome */
  -o-transition-timing-function: linear; /* Opera */
}

定义和用法

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 之间的数值。

transition-delay 属性

在过渡效果开始前等待 2 秒：

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

定义和用法

transition-delay 属性规定过渡效果何时开始。
transition-delay 值以秒或毫秒计。
默认值： 0

语法
transition-delay: time;

值|描述
time 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。

在一个例子中使用所有过渡属性：

div {
  transition-property: width;
  transition-duration: 1s;
  transition-timing-function: linear;
  transition-delay: 2s;
  /* Firefox 4 */
  -moz-transition-property:width;
  -moz-transition-duration:1s;
  -moz-transition-timing-function:linear;
  -moz-transition-delay:2s;
  /* Safari 和 Chrome */
  -webkit-transition-property:width;
  -webkit-transition-duration:1s;
  -webkit-transition-timing-function:linear;
  -webkit-transition-delay:2s;
  /* Opera */
  -o-transition-property:width;
  -o-transition-duration:1s;
  -o-transition-timing-function:linear;
  -o-transition-delay:2s;
}

与上面的例子相同的过渡效果，但是使用了简写的 transition 属性：

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

CSS3 动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

CSS3 @keyframes 规则

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

@keyframes myfirst {
  from {background: red;}
  to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */ {
  from {background: red;}
  to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */ {
  from {background: red;}
  to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */ {
  from {background: red;}
  to {background: yellow;}
}

CSS3 动画

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

规定动画的名称
规定动画的时长

实例
把 “myfirst” 动画捆绑到 div 元素，时长：5 秒：

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

注释：您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。

什么是 CSS3 中的动画？

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

实例
当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

@keyframes myfirst {
  0%   {background: red;}
  25%  {background: yellow;}
  50%  {background: blue;}
  100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */ {
  0%   {background: red;}
  25%  {background: yellow;}
  50%  {background: blue;}
  100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */ {
  0%   {background: red;}
  25%  {background: yellow;}
  50%  {background: blue;}
  100% {background: green;}
}

@-o-keyframes myfirst /* Opera */ {
  0%   {background: red;}
  25%  {background: yellow;}
  50%  {background: blue;}
  100% {background: green;}
}

改变背景色和位置：

@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;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */{
  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;}
}

@-o-keyframes myfirst /* Opera */{
  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;}
}

CSS3 动画属性???略

下面的表格列出了 @keyframes 规则和所有动画属性：

属性|描述
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 “ease”。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。
animation-fill-mode 规定对象动画时间之外的状态。

下面的两个例子设置了所有动画属性：
实例
运行名为 myfirst 的动画，其中设置了所有动画属性：

div {
  animation-name: myfirst;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: running;
  /* Firefox: */
  -moz-animation-name: myfirst;
  -moz-animation-duration: 5s;
  -moz-animation-timing-function: linear;
  -moz-animation-delay: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;
  -moz-animation-play-state: running;
  /* Safari 和 Chrome: */
  -webkit-animation-name: myfirst;
  -webkit-animation-duration: 5s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-play-state: running;
  /* Opera: */
  -o-animation-name: myfirst;
  -o-animation-duration: 5s;
  -o-animation-timing-function: linear;
  -o-animation-delay: 2s;
  -o-animation-iteration-count: infinite;
  -o-animation-direction: alternate;
  -o-animation-play-state: running;
}

与上面的动画相同，但是使用了简写的动画 animation 属性：

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 多列

通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！
在本章中，您将学习如下多列属性：

column-count
column-gap
column-rule
CSS3 创建多列
column-count 属性规定元素应该被分隔的列数：
把 div 元素中的文本分隔为三列：
1
2
3
4
5
div {
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}

CSS3 规定列之间的间隔

column-gap 属性规定列之间的间隔：
规定列之间 40 像素的间隔：

div {
  -moz-column-gap:40px;		/* Firefox */
  -webkit-column-gap:40px;	/* Safari 和 Chrome */
  column-gap:40px;
}

CSS3 列规则

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

div {
  -moz-column-rule:3px outset #ff0000;	/* Firefox */
  -webkit-column-rule:3px outset #ff0000;	/* Safari and Chrome */
  column-rule:3px outset #ff0000;
}

新的多列属性???略

下面的表格列出了所有的转换属性：
属性|描述
column-count 规定元素应该被分隔的列数。
column-fill 规定如何填充列。
column-gap 规定列之间的间隔。
column-rule 设置所有 column-rule-* 属性的简写属性。
column-rule-color 规定列之间规则的颜色。
column-rule-style 规定列之间规则的样式。
column-rule-width 规定列之间规则的宽度。
column-span 规定元素应该横跨的列数。
column-width 规定列的宽度。
columns 规定设置 column-width 和 column-count 的简写属性。

CSS3 用户界面

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

在本章中，您将学到以下用户界面属性：

resize
box-sizing
outline-offset
CSS3 Resizing
在 CSS3，resize 属性规定是否可由用户调整元素尺寸。

实例
规定 div 元素可由用户调整大小：

div {
  resize:both;
  overflow:auto;
}

CSS3 Box Sizing

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

实例
规定两个并排的带边框方框：

div {
  box-sizing:border-box;
  -moz-box-sizing:border-box;	/* Firefox */
  -webkit-box-sizing:border-box;	/* Safari */
  width:50%;
  float:left;
}

CSS3 Outline Offset

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同：

轮廓不占用空间
轮廓可能是非矩形

实例
规定边框边缘之外 15 像素处的轮廓：

div {
  border:2px solid black;
  outline:2px solid red;
  outline-offset:15px;
}

新的用户界面属性???略

下面的表格列出了所有的转换属性：
属性 | 描述
appearance 允许您将元素设置为标准用户界面元素的外观
box-sizing 允许您以确切的方式定义适应某个区域的具体内容。
icon 为创作者提供使用图标化等价物来设置元素样式的能力。
nav-down 规定在使用 arrow-down 导航键时向何处导航。
nav-index 设置元素的 tab 键控制次序。
nav-left 规定在使用 arrow-left 导航键时向何处导航。
nav-right 规定在使用 arrow-right 导航键时向何处导航。
nav-up 规定在使用 arrow-up 导航键时向何处导航。
outline-offset 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
resize 规定是否可由用户对元素的尺寸进行调整。

CSS3 简介

CSS3 模块

CSS3 边框

CSS3 圆角边框

CSS3 边框阴影

CSS3 边框图片

CSS3 背景

CSS3 background-size 属性

CSS3 background-origin 属性

CSS3 多重背景图片

background-clip 属性

CSS3 文本效果

CSS3 文本效果

CSS3 文本阴影

CSS3 自动换行

CSS3 @font-face 规则

使用您需要的字体

CSS3 字体描述符

CSS3 2D 转换

CSS3 转换

2D 转换

translate() 方法

rotate() 方法

scale() 方法

skew() 方法

matrix() 方法

语法

CSS3 3D 转换

3D 转换

rotateX() 方法

rotateY() 旋转

transform-style 属性

定义和用法

perspective 属性

perspective-origin 属性

backface-visibility 属性

CSS3 过渡

它如何工作？

多项改变

过渡属性

transition 属性

transition 属性

transition-property 属性

transition-duration 属性

transition-timing-function 属性

定义和用法

transition-delay 属性

定义和用法

CSS3 动画

CSS3 @keyframes 规则

CSS3 动画

什么是 CSS3 中的动画？

CSS3 动画属性???略

CSS3 多列

CSS3 创建多列

CSS3 规定列之间的间隔

CSS3 列规则

新的多列属性???略

CSS3 用户界面

CSS3 Resizing

CSS3 Box Sizing

CSS3 Outline Offset

新的用户界面属性???略