CSS3常用功能的寫法

隨著瀏覽器的升級，CSS3已經(jīng)可以投入實際應(yīng)用了。

但是，不同的瀏覽器有不同的CSS3實現(xiàn)，兼容性是一個大問題。上周的YDN介紹了CSS3 Please網(wǎng)站，該網(wǎng)站總結(jié)了一些常用功能的寫法。

以下就是這些寫法的詳細(xì)介紹。所有代碼都經(jīng)過了Firefox 3.6和IE 8.0的驗證，原文的錯誤之處也已得到改正。

一、圓角（Rounded Corner）

.box_round {

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

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

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

}

圓角的實現(xiàn)比較簡單，只要設(shè)好一個半徑值就可以了。遺憾的是，目前所有的IE都不支持CSS圓角，要等到IE 9才行。

二、盒狀陰影（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的設(shè)置是一樣的，都有4個參數(shù)，含義分別為：x軸偏移值、y軸偏移值、陰影的模糊度、以及陰影顏色。

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

三、線性漸變（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有三個參數(shù)。第一個參數(shù)表示線性漸變的方向，top是從上到下、left是從左到右，如果定義成left top，那就是從左上角到右下角。第二個和第三個參數(shù)分別是起點顏色和終點顏色。你還可以在它們之間插入更多的參數(shù)，表示多種顏色的漸變。

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

-webkit-gradient是webkit引擎對漸變的實現(xiàn)，一共有五個參數(shù)。第一個參數(shù)表示漸變類型（type），可以是linear（線性漸變）或者radial（輻射漸變）。第二個參數(shù)和第三個參數(shù)，都是一對值，分別表示漸變起點和終點。這對值可以用坐標(biāo)形式表示，也可以用關(guān)鍵值表示，比如left top（左上角）和left bottom（左下角）。第四個和第五個參數(shù)，分別是兩個color-stop函數(shù)。color-stop函數(shù)接受兩個參數(shù)，第一個表示漸變的位置，0為起點，0.5為中點，1為結(jié)束點；第二個表示該點的顏色。

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

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

四、透明（opacity）

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

但是，如果將上層對象的顏色變?yōu)橥该?，就可以透過它看到下層對象。

.box_rgba {

　　background-color: #B4B490;

　　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;

　　background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome */

}

先看第一行。

background-color: #B4B490;

這是設(shè)置對象的預(yù)備色，也就是不透明時的顏色。如果瀏覽器不支持透明，就將顯示這個顏色。

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濾鏡。我們要為它設(shè)置起點色（startColorstr）和終點色（endColorstr）。在單色透明的情況下，這兩個值是相同的。需要注意的是，它們的取值是一個八位的十六進(jìn)制值，前兩位表示alpha通道值，00表示完全透明，F(xiàn)F表示完全不透明；后六位則是這個顏色的RGB值。

background-color: rgba(180, 180, 144, 0.6);

除了IE，其他瀏覽器幾乎都支持rgba函數(shù)。它有四個參數(shù)，前三個為一種顏色的RGB值，第四個為透明度，這里設(shè)為0.6。

五、旋轉(zhuǎn)（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函數(shù)，實現(xiàn)某個對象的旋轉(zhuǎn)。比如rotate(7.5deg)就表示順時針旋轉(zhuǎn)7.5度（degree）。

IE則需要用到一個復(fù)雜的濾鏡DXImageTransform.Microsoft.Matrix。它一共接受五個參數(shù)，前四個參數(shù)需要自行計算三角函數(shù)，然后分別寫成M11 = cos(rotation),M12 = -sin(rotation),M21 = sin(rotation),M22 = cos(rotation)，其中的rotation表示旋轉(zhuǎn)角度，如果順時針旋轉(zhuǎn)7.5度，則rotation就為7.5；第五個參數(shù)SizingMethod表示重繪方式，'auto expand'代表自動擴(kuò)展到新的邊界。

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

六、服務(wù)器端字體（font-face）

設(shè)計網(wǎng)頁的時候，可能會用到某種特殊的字體。如果用戶的機(jī)器中沒有安裝，文字只能以普通字體顯示。

這時可以讓用戶的瀏覽器自行下載服務(wù)器端字體，然后就能呈現(xiàn)出設(shè)計者想要的效果。

@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';

表示為這種字體起一個名稱，可以隨意設(shè)置，我這里用的是MyFont。

src: url('myfont.eot');

這一行表示字體位置，由于ie只支持服務(wù)器端的eot字體，所以這一行是ie專用的。

src: local('myfont.ttf'),

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

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

local()表示在本機(jī)（客戶端）查找該字體，如果本機(jī)已經(jīng)安裝了，就不用下載了。url()表示字體在服務(wù)器上的位置，format()用來說明字體格式。Firefox 3.5支持TrueType和OpenType字體，F(xiàn)irefox 3.6又增加了WOFF字體。其他基于Webkit引擎的瀏覽器（sarif，opera、chrome），目前好像只支持truetype。

然后，使用的時候這樣寫就可以了。

h2{ font-family: "MyFont"; }

需要注意的是，字體文件必須與網(wǎng)頁文件來自同一個域名，符合瀏覽器的"同源政策"。另外，由于中文字體文件太大，服務(wù)器端字體顯然只適用于英文字體。

七、其他

利用css3，還可以完成transform（變形），包括skew（扭曲）和scale（縮放），以及css transitions（動態(tài)變換）。這些內(nèi)容待以后再補充。

作者:阮一峰