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 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 全系列瀏覽器不支援此屬性。