css3的一些新特性

background:rgba(254, 255, 200, 0.75);

例如上面代碼所示，前三個參數分別是分別是 R、G、B 三原色，範圍是 0-255。第四個參數是背景透明度，範圍是 0-1，如 0.5 代表透明度 50%。這個屬性使我們在瀏覽器中也可以做到像 Win7 一樣的半透明半透明效果。

css3圓角範例程式碼

/*FireFox 文法 */

-moz-border-radius: 6px 6px 6px 6px;

-moz-border-radius-topright: 6px;

-moz-border-radius-topleft: 6px;

-moz-border-radius-bottomright: 6px;

-moz-border-radius-bottomleft: 6px;

/*WebKit 核心瀏覽器文法 */

-webkit-border-radius: 6px 6px 6px 6px;

-webkit-border-top-right-radius: 6px;

-webkit-border-top-left-radius: 6px;

-webkit-border-bottom-right-radius: 6px;

-webkit-border-bottom-left-radius: 6px;

/*CSS 標準文法 */

border-radius:6px 6px 6px 6px;

border-top-right-radius: 6px;

border-top-left-radius: 6px;

border-bottom-right-radius: 6px;

border-bottom-left-radius: 6px;

如上面代碼所示，四個角的效果可以通過一行代碼 border-radius: 6px 6px 6px 6px來指定，其中四個參數從左至右分別代表：左上方、右上方、右下角、左下角。也可以類似 border-top-right-radius: 6px;這樣分別指定每一個角的效果。

漸層色

background: -moz-linear-gradient(

center top,/* 漸層開始的座標 */

rgba(254, 216, 80, 0.75),/* 漸層開始顏色 */

rgba(230, 125, 30, 0.75) 50%,/* 中間漸層顏色 */ www.2cto.com

rgba(254, 235, 121, 0.75)/* 漸層結束顏色 */ ) repeat scroll 0 0 transparent;

如上面代碼所示，Mozilla 採用 -moz-linear-gradient標籤表示線性漸層。第一個參數表示漸層開始的座標，可以是座標值，也可以是 top、bottom、left、right、center 等值。後面參數是漸層的顏色值，個數不限，之間用逗號隔開。每個顏色值可以是普通的十六進位顏色也可以是 RGBA 顏色值。每個顏色後面還可以跟一個百分比或者 0-1 之間的小數，表示該顏色在整個漸層色中的比例。

Webkit漸層色文法

background:-webkit-gradient(

linear,/* 漸層類型線性 */

left top,/* 漸層開始的座標 */

left bottom,/* 漸層結束的座標 */

from(rgba(254, 216, 80, 0.75)),/* 漸層開始顏色 */

to(rgba(254, 235, 121, 0.75)),/* 漸層結束顏色 */

color-stop(0.5,rgba(230, 125, 30, 0.75))/* 漸層的中間顏色 */

)

repeat scroll 0 0 transparent;

Webkit 瀏覽器使用 -webkit-gradient屬性工作表示漸層。第一個參數是漸層類型，通常是 linear線性漸層。第二個參數是漸層開始的座標，和 Mozilla 的第一個參數相同。第三個參數是漸層結束的座標。第四個和第五個分別是漸層開始和結束的顏色，可以是十六進位顏色值，也可以是 RGBA 顏色值。最後的 color-stop屬性可以有無數個，在前五個參數的後面以逗號隔開，表示家變中間的漸層顏色。在 color-stop屬性中，第一個參數是該漸層色佔得比例，可以是 0-1 的一個小數或者是一個百分數；第二個參數是漸層的顏色值同樣可以是十六進位的顏色值或者 RGBA 的顏色值。

形變

形變 Transform 是 CSS 繼線性色彩坡形之後的又一枚重磅炸彈，通常使用 CSS 和 HTML 我們是不可能使 HTML 元素旋轉或者傾斜一定角度的。為了使元素看起來更具有立體敢，我們不得不把這種效果做成一個圖片，這樣就限制了很多動態使用應用情境。Transform 屬性的引入使我們以前通常要藉助 SVG 等向量繪圖手段才能實現的功能，只需要一個簡單的 CSS 屬性就能實現。在 CSS3 中 Transform 屬性主要包括 rotate 旋轉、scale 縮放、translate 座標平移、skew 座標傾斜、matrix 矩陣變換。下面我們就來看看每個屬性是如何使用的。

/*Webkit 核心瀏覽器 */

-webkit-transform: rotate(-90deg);

-webkit-transform: scale(2);

-webkit-transform: scale(2, 1);

-webkit-transform: translate(10px, 20px);

-webkit-transform: skew(30deg, -10deg);

-webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);

/*Firefox 瀏覽器 */

-moz-transform: rotate(-90deg);

-moz-transform: scale(2);

-moz-transform: scale(2, 1);

-moz-transform: translate(10px, 20px);

-moz-transform: skew(30deg, -10deg);

-moz-transform: matrix(1, -0.2, 0, 1, 0, 0);

/*Opera 瀏覽器 */

-o-transform: rotate(-90deg);

-o-transform: scale(2);

-o-transform: scale(2, 1);

-o-transform: translate(10px, 20px);

-o-transform: skew(30deg, -10deg);

-o-transform: matrix(1, -0.2, 0, 1, 0, 0);

旋轉屬性代碼非常簡單，rotate 屬性加上旋轉角度參數，45deg 代表順時針方向旋轉 45 度。如果是逆時針旋轉 45 度則是 -45deg。

類似於旋轉，縮放屬性是由 scale 關鍵字加上縮放參數實現的。當只有一個參數 2 時表示該 HTML 元素的 X 軸、Y 軸方向同時被放大 2 被，0.5 表示同時縮小一半。如果同時有 2 和 3 兩個參數時，表示該 HTML 元素的 X 軸被放大 2 被 Y 軸方向被放大 3 被。

座標平移屬性顧名思義，就是將該 HTML 元素向 X、Y 軸方向平移若干像素，由 translate 屬性實現。後面兩個參數分別表示向 X 軸、Y 軸平移的量。

skew 屬性也是一個很有用的 transform 功能，它可以將一個對象圍繞著 X 和 Y 軸按照一定的角度傾斜。這和 rotate 的旋轉不一樣，rotate 只是旋轉而不會讓 HTML 元素的形狀改變，而 skew 會讓這個 HTML 元素的形狀改變。skew 有兩個參數，分別代表該 HTML 元素沿 X 和 Y 軸的傾斜度數。

Matrix，你沒有看錯，就是我們通常的矩陣變換。這個變換就是我們在解析幾何中學到的座標系變換。他有六個參數 (a, b, c, d, e, f)，是一個 3 × 3 的矩陣，代表座標變換的變換矩陣。使用它我們就可以很靈活的完成任意的座標系變換。有興趣的朋友話可以查看大學解析幾何的課本，或者 W3c 在 SVG 中關於 Matrix 變化的定義和描述。

目前支援這 5 中變換轉屬性的瀏覽器有 Safari 4+、Chrome 5+、Firefox 3.5+、Opera10.5+，IE 全系列瀏覽器不支援該屬性。

