CSS3經常使用功能的寫法

隨着瀏覽器的升級，CSS3已經能夠投入實際應用了。

可是，不一樣的瀏覽器有不一樣的CSS3實現，兼容性是一個大問題。上週的YDN介紹了CSS3 Please網站，該網站總結了一些經常使用功能的寫法。

如下就是這些寫法的詳細介紹。全部代碼都通過了Firefox 3.6和IE 8.0的驗證，原文的錯誤之處也已獲得改正。

1、圓角（Rounded Corner）

.box_round {

　　-moz-border-radius: 30px; /* FF1+ */

　　-webkit-border-radius: 30px; /* Saf3+, Chrome */

　　border-radius: 30px; /* Opera 10.5, IE 9 */

}

圓角的實現比較簡單，只要設好一個半徑值就能夠了。遺憾的是，目前全部的IE都不支持CSS圓角，要等到IE 9才行。

2、盒狀陰影（Box Shadow）

.box_shadow {

　　-moz-box-shadow: 3px 3px 4px #ffffff; /* FF3.5+ */

　　-webkit-box-shadow: 3px 3px 4px #ffffff; /* Saf3.0+, Chrome */

　　box-shadow: 3px 3px 4px #ffffff; /* Opera 10.5, IE 9.0 */

　　filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#ffffff'); /* IE6,IE7 */

　　-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#ffffff')"; /* IE8 */
}

-moz-box-shadow、-webkit-box-shadow和box-shadow的設置是同樣的，都有4個參數，含義分別爲：x軸偏移值、y軸偏移值、陰影的模糊度、以及陰影顏色。

IE 6~8使用其獨有的濾鏡，須要設置三個參數：offX（X軸偏移值）、offY（Y軸偏移值）、Color（陰影顏色）。

3、線性漸變（Gradient）

.box_gradient {

　　background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */

　　background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */

　　filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999', GradientType='0'); /* IE6,IE7 */

　　-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999',GradientType='0')"; /* IE8 */

}

先看Firefox。

-moz-linear-gradient(top, #444444, #999999);

-moz-linear-gradient有三個參數。第一個參數表示線性漸變的方向，top是從上到下、left是從左到右，若是定義成left top，那就是從左上角到右下角。第二個和第三個參數分別是起點顏色和終點顏色。你還能夠在它們之間插入更多的參數，表示多種顏色的漸變。

-webkit-gradient(linear,left top, left bottom, color-stop(0, #444444),color-stop(1, #999999));

-webkit-gradient是webkit引擎對漸變的實現，一共有五個參數。第一個參數表示漸變類型（type），能夠是linear（線性漸變）或者radial（輻射漸變）。第二個參數和第三個參數，都是一對值，分別表示漸變起點和終點。這對值能夠用座標形式表示，也能夠用關鍵值表示，好比left top（左上角）和left bottom（左下角）。第四個和第五個參數，分別是兩個color-stop函數。color-stop函數接受兩個參數，第一個表示漸變的位置，0爲起點，0.5爲中點，1爲結束點；第二個表示該點的顏色。

DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999', GradientType='0');

IE依靠濾鏡實現漸變。startColorstr表示起點的顏色，endColorstr表示終點顏色。GradientType表示漸變類型，0爲缺省值，表示垂直漸變，1表示水平漸變。

4、透明（opacity）

正常狀況下，上層的對象會覆蓋下層的對象。

可是，若是將上層對象的顏色變爲透明，就能夠透過它看到下層對象。

.box_rgba {

　　

　　background:transparent;

　　filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490'); /* IE6,IE7 */

　　-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490')"; /* IE8 */

　　zoom: 1;

　　 /* FF3+, Saf3+, Opera 10.10+, Chrome */

}

先看第一行。

這是設置對象的預備色，也就是不透明時的顏色。若是瀏覽器不支持透明，就將顯示這個顏色。

background:transparent;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490'); /* IE6,IE7 */

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490')"; /* IE8 */

zoom: 1;

這幾行是專門爲IE寫的，其中主要用到 DXImageTransform.Microsoft.gradient濾鏡。咱們要爲它設置起點色（startColorstr）和終點色（endColorstr）。在單色透明的狀況下，這兩個值是相同的。須要注意的是，它們的取值是一個八位的十六進制值，前兩位表示alpha通道值，00表示徹底透明，FF表示徹底不透明；後六位則是這個顏色的RGB值。

除了IE，其餘瀏覽器幾乎都支持rgba函數。它有四個參數，前三個爲一種顏色的RGB值，第四個爲透明度，這裏設爲0.6。

5、旋轉（rotation）

.box_rotate {

　　-moz-transform: rotate(7.5deg); /* FF3.5+ */

　　-o-transform: rotate(7.5deg); /* Opera 10.5 */

　　-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */

　　filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand');

　　-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand')"; /* IE8 */

}

除了IE之外，其餘瀏覽器都是用rotate函數，實現某個對象的旋轉。好比rotate(7.5deg)就表示順時針旋轉7.5度（degree）。

IE則須要用到一個複雜的濾鏡DXImageTransform.Microsoft.Matrix。它一共接受五個參數，前四個參數須要自行計算三角函數，而後分別寫成M11 = cos(rotation),M12 = -sin(rotation),M21 = sin(rotation),M22 = cos(rotation)，其中的rotation表示旋轉角度，若是順時針旋轉7.5度，則rotation就爲7.5；第五個參數SizingMethod表示重繪方式，'auto expand'表明自動擴展到新的邊界。

除了這個濾鏡，IE還有一個稍微簡單一點的濾鏡DXImageTransform.Microsoft.BasicImage(rotation=x)。其中的x只能取值爲1，2，3，0，分別表示順時針選擇90度、180度、270度和360度。

6、服務器端字體（font-face）

設計網頁的時候，可能會用到某種特殊的字體。若是用戶的機器中沒有安裝，文字只能以普通字體顯示。

這時可讓用戶的瀏覽器自行下載服務器端字體，而後就能呈現出設計者想要的效果。

@font-face {

　　font-family: 'MyFont';

　　src: url('myfont.eot'); /* IE6+ */

　　src: local('myfont.ttf'),

　　url('myfont.woff') format('woff'), /* FF3.6 */

　　url('myfont.ttf') format('truetype'); /* FF3.5+, Saf3+,Chrome,Opera10+ */

}

第一行代碼：

font-family: 'MyFont';

表示爲這種字體起一個名稱，能夠隨意設置，我這裏用的是MyFont。

src: url('myfont.eot');

這一行表示字體位置，因爲ie只支持服務器端的eot字體，因此這一行是ie專用的。

src: local('myfont.ttf'),

　　url('myfont.woff') format('woff'),

　　url('myfont.ttf') format('truetype');

local()表示在本機（客戶端）查找該字體，若是本機已經安裝了，就不用下載了。url()表示字體在服務器上的位置，format()用來講明字體格式。Firefox 3.5支持TrueType和OpenType字體，Firefox 3.6又增長了WOFF字體。其餘基於Webkit引擎的瀏覽器（sarif，opera、chrome），目前好像只支持truetype。

而後，使用的時候這樣寫就能夠了。

h2{ font-family: "MyFont"; }

須要注意的是，字體文件必須與網頁文件來自同一個域名，符合瀏覽器的"同源政策"。另外，因爲中文字體文件太大，服務器端字體顯然只適用於英文字體。

7、其餘

利用css3，還能夠完成transform（變形），包括skew（扭曲）和scale（縮放），以及css transitions（動態變換）。這些內容待之後再補充。

（完）