【51CTO快譯】在CSS版本3中會(huì)有許多振奮人心的功能。CSS3會(huì)有更好的靈活性，使之前復(fù)雜的效果現(xiàn)在制作起來游刃有余。在CSS3中設(shè)計(jì)有許多可節(jié)省時(shí)間的規(guī)則：text-shadow（文字陰影效果），box-sizing（變尺寸方框），opacity（透明度），multiple backgrounds（多背景），border-radius（邊框圓角），border-image（邊框圖象），multi-column layout（多列布局）等等。

盡管目前只有***的瀏覽器支持這些效果，看看之后會(huì)怎么樣還是很有意思的。

在這篇文章中，我們要來看看CSS3的一些有意思的屬性，現(xiàn)在設(shè)計(jì)網(wǎng)頁時(shí)就可以使用這些屬性。

51CTO編輯推薦：CSS 3備受期待的8大功能

CSS3 顏色模塊

CSS3支持更多顏色和更廣的顏色定義。CSS3支持的新顏色有HSL, CMYK, HSLA and RGBA。下面的powerpoint詳細(xì)介紹了CSS3顏色以及如何使用這些顏色。

漸變邊框

你可以使用-moz-border-radius / -webkit-border屬性得到漸變邊框。

邊框圖像

有時(shí)普通CSS邊框?qū)傩詿o法滿足要求。如果希望在邊框上使用圖像，可以使用CSS3的border-image和border-corner-image 屬性來支持邊框圖像。

圓角方框

使用border-radius和background position屬性可以輕松制作圓角方框。

方框陰影

CSS3的box-shadow屬性可以讓你添加陰影效果，而不用在選定的元素上使用圖片。目前Safari 3+和Firefox 3.1 (Alpha)支持box-shadow屬性。

多背景圖片

想在一個(gè)方框或一個(gè)段落上添加多個(gè)背景？CSS3允許在一個(gè)元素上有多個(gè)背景。

多列

不需要添加表格，使用-moz-column-count和-moz-column-width這個(gè)CSS3模塊可以制作多列文本。如果網(wǎng)頁上的文本過長(zhǎng)，這個(gè)CSS3標(biāo)簽就有了用武之地。

文字陰影效果

需要有像Photoshop中Text shadow的效果嗎？CSS3 text-shadow屬性可以給一些文本的所有字母上都加上陰影。對(duì)CSS3來說text-shadow屬性并不是新事物，它開始在CSS2中推出，但CSS 2.1又取消了這個(gè)屬性。

#p#

變尺寸方框和方框模型

如果瀏覽器的尺寸為可調(diào)，CSS3的box-sizing屬性可以讓你通過計(jì)算一個(gè)元素寬度來指定控制瀏覽器行為。

CSS3 opacity

盡管CSS的透明度屬性已經(jīng)存在了一段時(shí)間，推出的CSS3中透明度屬性會(huì)得到更廣泛的應(yīng)用。你可以使用這個(gè)屬性設(shè)定方框，圖像和文本的透明度。

CSS3 選擇符

面對(duì)CSS3新推出的選擇符，你是否感到無所適從？這篇文章對(duì)CSS3選擇符做的破解和解釋是很有實(shí)用意義的。

用CSS3和RGBA制作的按鈕

你不會(huì)相信這些按鈕沒有用到任何圖片僅使用CSS3屬性就制作成了。

用CSS3展開用戶界面

這是一個(gè)用創(chuàng)意地使用CSS3的例子。一個(gè)用CSS3對(duì) OSX用戶界面所作的模擬。

帶有jQuery插件的CSS3樣板布局

這個(gè)插件可以讓網(wǎng)頁設(shè)計(jì)者通過jQuery使用W3’s CSS 的樣板布局模塊。

使用CSS3 RGBA制作透明效果

RGBA可以讓你指定一種顏色為透明。

CSS3用戶自定義字體

雖然用其它方法也可以嵌入字體，不過使用CSS3做自定義字體會(huì)使問題簡(jiǎn)單不少。

#p#

用CSS3和jQuery制作Polaroid圖片瀏覽器

網(wǎng)頁制作人Marco Kuiper給我們展示了如何結(jié)合CSS3和JQuery制作Polaroid圖片集。

變尺寸方框的例子和使用

結(jié)合使用各CSS3特性而產(chǎn)生的的樂趣

使用了CSS選擇符后，鼠標(biāo)停留在菜單上時(shí)，它就可以模擬按下按鈕。

創(chuàng)建和使用CSS3鏈接

CSS3可以使鏈接管理更有力有效。我們可以輕松把鏈接狀態(tài)指定為鏈接，被訪問，停留和活動(dòng)狀態(tài)等不同的鏈接狀態(tài)值。

CSS3 的提示文本

將:before (or :after) pseudo element和:hover pseudo class.結(jié)合可以制作提示文本。

用屬性選擇器設(shè)置形式

使用屬性選擇器可以設(shè)置網(wǎng)頁外貌。

CSS 透明度

有許多使用CSS透明度的方式使網(wǎng)站用戶對(duì)網(wǎng)站產(chǎn)生好感。你可以控制文字和圖片的透明度使內(nèi)容達(dá)到視覺上的滿足。

使用CSS3選擇器應(yīng)用鏈接圖標(biāo)

用CSS3選擇器在鏈接旁添加圖標(biāo)更簡(jiǎn)易。

簡(jiǎn)單CSS3圓角屬性（支持IE）

盡管Safari 和Firefox目前各版本都支持CSS的border-radius（圓角邊框）屬性，Internet Explorer卻不支持。不過，使用IE的條件語句和圖片你就有了很好的跨瀏覽器圓角功能。

CSS3中的陰影效果

CSS3的-webkit-box-shadow屬性可以在任意指定div上制作陰影。這個(gè)例子僅用于Safari。

原文：CSS3 Exciting Functions and Features: 30+ Useful Tutorials

您正在閱讀的是：CSS 3中的炫目新功能搶先預(yù)覽

【編輯推薦】

1. CSS 3備受期待的8大功能
2. CSS網(wǎng)頁布局困擾新手的八個(gè)問題
3. 25個(gè)下拉菜單導(dǎo)航腳本下載
4. HTML 5 正式標(biāo)準(zhǔn)恐將2022年才能正式發(fā)布
5. CSS禪意花園》作者Dave Shea談CSS設(shè)計(jì)