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%,/* 中間漸變顏色 */
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 全系列瀏覽器不支援該屬性。

css3的一些新特性

css3的一些新特性

CSS3的一些新特性

css3的一些新特性

相關推薦