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