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

使用在WebKit中可用的CSS高級特性，可以為你的網站或網絡應用帶來一個新的更令人興奮的東西。

在閱讀下面文章前，你可以先了解下網頁教學網以前介紹的WebKit文章：瀏覽器Apple Safari和Google Chrome內核webkit

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

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

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

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

1>

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

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

截圖1.圖片選擇和陰影

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

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

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

1234<style> img img</style>

1>

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

截圖2.翻轉后的圖片

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

截圖3.翻轉之前的圖片

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