CSS3 简介 （一）

1：对CSS3已完全向后兼容，所以你就不必改变现有的设计。浏览器将永远支持CSS2。
2：CSS3 模块
（1）选择器
（2）盒模型
（3）背景和边框
（4）文字特效
（5）2D/3D转换
（6）动画
（7）多列布局
（8）用户界面

css3 新增的属性
border-image 设置所有边框图像的速记属性。 3
border-radius 一个用于设置所有四个边框- *-半径属性的速记属性 3
box-shadow 附加一个或多个下拉框的阴影

CSS3 背景
（1）background-image
（2）background-size
（3）background-origin
（4）background-clip

CSS3 渐变（Gradients）
（1）线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
（2）径向渐变（Radial Gradients）- 由它们的中心定义

实例
从上到下的线性渐变：
#grad {
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, blue); /* 标准的语法 */
}

CSS3 文本效果
text-shadow
box-shadow
text-overflow
word-wrap
word-break

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

CSS3 2D 转换
2D 转换
在本章您将了解2D变换方法：
translate()
rotate()
scale()
skew()
matrix()

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

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

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

-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */

CSS3 3D 转换
CSS3 允许您使用 3D 转换来对元素进行格式化。
在本章中，您将学到其中的一些 3D 转换方法：
（1）rotateX()
（2）rotateY()

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

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

CSS3 过渡
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。用鼠标移过下面的元素：

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

简写：

div
{
    transition: width 1s linear 2s;
    /* Safari */
    -webkit-transition:width 1s linear 2s;
}