CSS3+HTML5是未來的Web，它們都還沒有正式到來，雖然不少瀏覽器已經(jīng)開始對它們提供部分支持。本文介紹了5個CSS3技巧，可以幫你實現(xiàn)未來的Web，不過，這些技術(shù)不應(yīng)該用在正式的客戶項目，它們更適合你的個人博客站點，Web設(shè)計社區(qū)，或者不會有客戶向你投訴的場合。

1.圓角效果

CSS3新功能中最常用的一項是圓角效果，標(biāo)準(zhǔn)HTML方塊對象是90度方角的，CSS3可以幫你實現(xiàn)圓角。

-moz-border-radius：20px;

-webkit-border-radius：20px;

border-radius：20px;

甚至單個角也可以實現(xiàn)圓角，不過Mozilla和Webkit的語法稍有不同。

-moz-border-radius-topleft：20px;

-moz-border-radius-topright：20px;

-moz-border-radius-bottomleft：10px;

-moz-border-radius-bottomright：10px;

-webkit-border-top-rightright-radius：20px;

-webkit-border-top-left-radius：20px;

-webkit-border-bottom-left-radius：10px;

-webkit-border-bottom-rightright-radius：10px;

所支持的瀏覽器：Firefox，Safari，Chrome

用例：Twitter.

2.圖形化邊界

顧名思義，圖形化邊界就是允許使用圖片作為對象的邊界，語法如下：

border：5pxsolid#cccccc;

-webkit-border-image：url（/images/border-image.png）5repeat;

-moz-border-image：url（/images/border-image.png）5repeat;

border-image：url（/images/border-image.png）5repeat;

這里，border：5px設(shè)定了邊界的寬度，然后，每個邊界的圖片定義告訴瀏覽器，使用圖片的多大一部分來充當(dāng)邊界。邊界圖片還可以針對每一條邊單獨設(shè)置：

border-bottom-rightright-image

border-bottom-image

border-bottom-left-image

border-left-image

border-top-left-image

border-top-image

border-top-rightright-image

border-right-image

支持的瀏覽器：Firefox3.1，Safari，Chrome.

用例：Blog.SpoonGraphics.

3.塊陰影與文字陰影

陰影效果曾讓W(xué)eb設(shè)計師既愛又恨，現(xiàn)在，有了CSS3，你不再需要Photoshop，已經(jīng)有網(wǎng)站在使用這個功能了，如24Wayswebsite.

-webkit-box-shadow：10px10px25px#ccc;

-moz-box-shadow：10px10px25px#ccc;

box-shadow：10px10px25px#ccc;

前兩個屬性設(shè)置陰影的X/Y位移，這里分別是10px，第3個屬性定義陰影的虛化程度，最后一個設(shè)置陰影的顏色。文字陰影也可以這樣設(shè)置：

text-shadow：2px2px5px#ccc;

支持的瀏覽器：Firefox3.1，Safari，Chrome（只支持Box陰影），Opera（只支持文字陰影）。前3個數(shù)字表示紅綠藍三色的值，最后一個值代表透明度，另外，我們還可以使用opacity實現(xiàn)透明度（目前的燈箱效果多使用該技巧-譯者）

用例：24Ways.

4.使用RGBA實現(xiàn)透明效果

目前，Web設(shè)計中的透明效果主要靠PNG圖片實現(xiàn)（但在IE瀏覽器支持得并不好-譯者），在CSS3，可以直接實現(xiàn)透明效果。

rgba（200，54，54，0.5）;

background：rgba（200，54，54，0.5）;

color：rgba（200，54，54，0.5）;

color：#000;

opacity：0.5;

支持的瀏覽器：Firefox，Safari，Chrome，Opera（opacity）以及IE7（opacity，withfixes）。

用例：24Ways（RGBA）。

5.使用@Font-Face實現(xiàn)定制字體

Web設(shè)計中有幾種字體是比較安全的，如Arial，Helvetica，Verdana，Georgia，ComicSans（中文的，一般來說宋體是唯一安全的-譯者），現(xiàn)在，使用CSS3的@font-face可以自己指定字體，不過因為牽扯到版權(quán)問題，實際能用的字體也是有限的（另外，體積龐大的中文字體也是一個不好解決的問題-譯者）。

語法如下：

@font-face{

font-family：‘Anivers’;

src：url（‘/images/Anivers.otf’）format（‘opentype’）;

}

支持的瀏覽器：Firefox3.1，Safari，Opera10andIE7（需要一番周折，如果你不怕麻煩，可以在IE實現(xiàn)這個功能，請參考：makefont-faceworkinIE）

用例：TapTapTap.

雖然CSS3尚在開發(fā)中，上面提到的這些功能已經(jīng)可以在部分瀏覽器中使用了，尤其是Safari。不幸的是，Safari并非主流瀏覽器。

Firefox目前擁有大量用戶基礎(chǔ)，另外，即將推出的Firefox3.1支持不少CSS3效果，因為Firefox用戶的升級積極性很高，因此，會有不少用戶可以提前體驗CSS3的新功能。

GoogleChrome今年剛剛發(fā)布，它基于Webkit引擎，因此和Safari很相似，因為Safari主要用于Mac市場，Chrome可以正好彌補Windows市場的空缺。

根據(jù)統(tǒng)計數(shù)據(jù)，2008年11月止，44.2%的用戶使用Firefox，3.1%使用Chrome，2.7%使用Safari，意味著CSS3的部分功能已經(jīng)可以支持近半Internet用戶，而在Web設(shè)計圈子，這個比例可能更高，大約有73.6%（Blog.SpoonGraphics提供的數(shù)據(jù)）

6.負面因素

上面講述的這些CSS3功能會給你的網(wǎng)站帶來出色的效果，但仍有一些負面的因素必須考慮：

InternetExplorer：46%的Internet無法看到這些效果，因此不要將這些東西用于重要的設(shè)計。同時保證，在這些效果不起作用的地方，有替代設(shè)計可用。

CSS驗證問題：這些CSS3功能并非最終版本，目前不同的瀏覽器使用不同標(biāo)簽實現(xiàn)這些功能，可能為你的StyleSheet帶來驗證上的問題。

臃腫代碼：因為不同瀏覽器要使用不同定義語法，最終將導(dǎo)致你的CSS代碼十分臃腫。

不當(dāng)?shù)氖褂茫簩@些效果的不當(dāng)使用，可能帶來一些不良后果，陰影效果尤其如此。

中文翻譯來源：COMSHARPCMS官方網(wǎng)站（35公里譯）

• CSS3
• css