武林網(wǎng)(www.survivalescaperooms.com)文章簡介：WebKit是Safari和Google Chrome瀏覽器的渲染引擎。所以，本文中的訣竅在Safari3/4和Chrome1.0/2.0中都是支持的。

使用在WebKit中可用的CSS高級特性，可以為你的網(wǎng)站或網(wǎng)絡(luò)應(yīng)用帶來一個新的更令人興奮的東西。

在閱讀下面文章前，你可以先了解下網(wǎng)頁教學(xué)網(wǎng)以前介紹的WebKit文章：瀏覽器Apple Safari和Google Chrome內(nèi)核webkit

WebKit是Safari和Google Chrome瀏覽器的渲染引擎。所以，本文中的訣竅在Safari3/4和Chrome1.0/2.0中都是支持的。

因為瀏覽器會簡單的無視他們不支持的CSS屬性，所以在其他瀏覽器中，這些訣竅中的大部分可能會無效。使用只有WebKit支持的CSS屬性的網(wǎng)頁在基于WebKit的瀏覽器中會有非常出色的視覺效果和體驗，并且在其他瀏覽器中也可能會有某些效果——至少不會有負面的影響。

注意: 你在本文中看到的-webkit前綴是一個瀏覽器生產(chǎn)商通常使用的一種方式，它暗示該CSS屬性或規(guī)則尚未成為W3C標準的一部分。比如，box-shadow屬性還只是開發(fā)中的CSS3標準的一部分。基于Mozilla的瀏覽器使用-moz前綴。

讓我們從向你展示為網(wǎng)頁中的任意元素添加陰影效果是多么的簡單開始吧。下面的代碼片段將演示一個輕微旋轉(zhuǎn)并有陰影的圖片，這兩個效果都是使用CSS添加的。

1>

上面的代碼中，transform CSS 屬性實現(xiàn)圖片旋轉(zhuǎn)，box-shadow屬性為圖片添加陰影效果。你可以改變旋轉(zhuǎn)的角度，或者是陰影的參數(shù)，僅僅調(diào)整那些參數(shù)就OK了。

嘗試一下，你將看到下面演示的旋轉(zhuǎn)圖片效果。

截圖1.圖片選擇和陰影

上面的CSS寫在一個img標簽的style屬性中，當然你可以把它們作為一個類放到一個style標簽或獨立的樣式文件中。

過去，常常使用服務(wù)器端代碼來處理圖片以實現(xiàn)陰影效果，現(xiàn)在使用簡單的CSS樣式你就可以在客戶端瀏覽器中實現(xiàn)它，而且看起來很棒。

下一個示例將演示當你把鼠標放到一張圖片上時，它會彈出的效果。實現(xiàn)這些只需要使用一個hover樣式和一個度數(shù)改變。該效果的CSS如下所示。

1234<style> img img</style>

1>

鼠標滑過圖片，它就會彈出并變大，如下所示。

截圖2.翻轉(zhuǎn)后的圖片

將鼠標從圖片上挪開，圖片又會恢復(fù)原狀。

截圖3.翻轉(zhuǎn)之前的圖片

正如你所能看到的那樣，你可以使用幾行CSS來實現(xiàn)這個效果。