1. CSS3 选择器

2. CSS3 边框（Borders）

用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序

div {
  border: 2px solid;
  border-radius: 25px;
  box-shadow: 10px 10px 5px #888888;
  border-image: url(border.png) 30 30 round;
}

3. CSS3 背景

CSS3 中包含几个新的背景属性，提供更大背景元素控制。

div {
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-origin: content-box;
}

多背景

body {
  background-image: url(img_flwr.gif), url(img_tree.gif);
}

4. CSS3 渐变

CSS3 定义了两种类型的渐变（gradients）：

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

background: linear-gradient(direction, color-stop1, color-stop2, ...);

• 径向渐变（Radial Gradients）- 由它们的中心定义

background: radial-gradient(center, shape size, start-color, ..., last-color);

5. CSS3 文本效果

6. CSS3 字体

以前 CSS3 的版本，网页设计师不得不使用用户计算机上已经安装的字体。使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。您所选择的字体在新的 CSS3 版本有关于@font-face 规则描述。您"自己的"的字体是在 CSS3 @font-face 规则中定义的。

<style>
  @font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
  }
  div {
    font-family: myFirstFont;
  }
</style>

7. CSS3 转换和变形

2D 新转换属性

以下列出了所有的转换属性:

2D 转换方法

3D 转换属性

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

3D 转换方法

8. CSS3 过渡

过渡属性

下表列出了所有的过渡属性:

div {
  transition-property: width;
  transition-duration: 1s;
  transition-timing-function: linear;
  transition-delay: 2s;
  /* Safari */
  -webkit-transition-property: width;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  -webkit-transition-delay: 2s;
}

9. CSS3 动画

要创建 CSS3 动画，你需要了解@keyframes 规则。@keyframes 规则是创建动画。 @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

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

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

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

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;
  /* Safari and 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;
}

10. CSS3 多列

下表列出了所有 CSS3 的多列属性：

11. CSS3 盒模型

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框，主要包括以下用户界面属性：

• resize：none | both | horizontal | vertical | inherit
• box-sizing: content-box | border-box | inherit
• outline:outline-color outline-style outline-width outine-offset

resize 属性指定一个元素是否应该由用户去调整大小。

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

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

12. CSS3 伸缩布局盒模型(弹性盒)

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

下表列出了在弹性盒子中常用到的属性:

13. CSS3 多媒体查询

从 CSS 版本 2 开始，就可以通过媒体类型在 CSS 中获得媒体支持。如果您曾经使用过打印样式表，那么您可能已经使用过媒体类型。清单 1 展示了一个示例。

清单 1. 使用媒体类型

<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

清单 2. 媒体查询规则

@media all and (min-width: 800px) { ... }

@media all 是媒体类型，也就是说，将此 CSS 应用于所有媒体类型。

(min-width:800px) 是包含媒体查询的表达式，如果浏览器的最小宽度为 800 像素，则会告诉浏览器只运用下列 CSS。

清单 3. and 条件

@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

清单 4. or 关键词

@media (min-width:800px) or (orientation:portrait) { ... }

清单 5. 使用 not

@media (not min-width:800px) { ... }