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 6p x;
-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-order-left-ius: 6px- -right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
/*CSS 標準語法*/order6p top- right-radius: 6px;
border-top-left-radius: 6px;
border-bottom-right-radius: 6px;
border-bot四個角落的效果可以透過一行程式碼border-radius: 6px 6px 6px 6px來指定，其中四個參數從左到右分別代表：左上角、右上角、右下角、左下角。也可以類似 border-top-right-radius: 6px;這樣分別指定每一個角的效果。
漸層色
background: -moz-linear-gradient(
center top,/* 漸變開始的座標*/
center top,/* 漸變開始的座標*/
center top,/* 漸變開始的座標*/
cent, 586252525,005), 25,6052, */
rgba(230, 125, 30, 0.75) 50%,/* 中間漸變顏色*/ www.2cto.com
rgba(254, 235, 121,
rgba(254, 235, 121, 0.75)/ 微變* 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))/* 漸變的中間顏色*/
)
kit-Webscroll 0 0 transparwebsmm; -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);
-webpkit-transform: 網頁( 1);
-webkit-transform: translate(10px, 20px);
-webkit-transform: skew(30deg, -10deg);
,-webkit-transform:
, 0. 0, 0); /*Firefox 瀏覽器*/ -moz-transform: rotate(-90deg); :-moz-transform:-moz-transform);-moz-transform: scale(2, 1);
-moz-transform: translate(10px, 20px);
-moz-transform: skew(30deg, -10de
-moz-transform: skew(30deg, -10deg); (1, -0.2, 0, 1, 0, 0); /*Opera 瀏覽器*/ -o-transform: rotate(-90deg); -o-transform:-o-transform: scale(2, 1);
-o-transform: translate(10px, 20px);
-o-transform: skew(30deg, -100g); (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 全系列瀏覽器不支援此屬性。
