WebKit中可用的CSS高級(jí)特性

2024-07-11 08:44:25

字體：大中小

供稿：網(wǎng)友

WebKit是Safari和Google Chrome瀏覽器的渲染引擎。所以，本文中的訣竅在Safari3/4和Chrome1.0/2.0中都是支持的。
使用在WebKit中可用的CSS高級(jí)特性，可以為你的網(wǎng)站或網(wǎng)絡(luò)應(yīng)用帶來(lái)一個(gè)新的更令人興奮的東西。
在閱讀下面文章前，你可以先了解下武林網(wǎng)以前介紹的WebKit文章：瀏覽器Apple Safari和Google Chrome內(nèi)核webkit
WebKit是Safari和Google Chrome瀏覽器的渲染引擎。所以，本文中的訣竅在Safari3/4和Chrome1.0/2.0中都是支持的。
因?yàn)闉g覽器會(huì)簡(jiǎn)單的無(wú)視他們不支持的CSS屬性，所以在其他瀏覽器中，這些訣竅中的大部分可能會(huì)無(wú)效。使用只有WebKit支持的CSS屬性的網(wǎng)頁(yè)在基于WebKit的瀏覽器中會(huì)有非常出色的視覺(jué)效果和體驗(yàn)，并且在其他瀏覽器中也可能會(huì)有某些效果——至少不會(huì)有負(fù)面的影響。
注意: 你在本文中看到的-webkit前綴是一個(gè)瀏覽器生產(chǎn)商通常使用的一種方式，它暗示該CSS屬性或規(guī)則尚未成為W3C標(biāo)準(zhǔn)的一部分。比如，box-shadow屬性還只是開發(fā)中的CSS3標(biāo)準(zhǔn)的一部分。基于Mozilla的瀏覽器使用-moz前綴。1.簡(jiǎn)單的陰影
讓我們從向你展示為網(wǎng)頁(yè)中的任意元素添加陰影效果是多么的簡(jiǎn)單開始吧。下面的代碼片段將演示一個(gè)輕微旋轉(zhuǎn)并有陰影的圖片，這兩個(gè)效果都是使用CSS添加的。
1
<img src="megan.jpg" style="-webkit-transform:rotate(5deg);-webkit-box-shadow:10px 10px 5px #888;" />
上面的代碼中，transform CSS 屬性實(shí)現(xiàn)圖片旋轉(zhuǎn)，box-shadow屬性為圖片添加陰影效果。你可以改變旋轉(zhuǎn)的角度，或者是陰影的參數(shù)，僅僅調(diào)整那些參數(shù)就OK了。
嘗試一下，你將看到下面演示的旋轉(zhuǎn)圖片效果。
Image rotation and drop shadow provided by CSS

Image rotation and drop shadow provided by CSS

截圖1.圖片選擇和陰影
上面的CSS寫在一個(gè)img標(biāo)簽的style屬性中，當(dāng)然你可以把它們作為一個(gè)類放到一個(gè)style標(biāo)簽或獨(dú)立的樣式文件中。
過(guò)去，常常使用服務(wù)器端代碼來(lái)處理圖片以實(shí)現(xiàn)陰影效果，現(xiàn)在使用簡(jiǎn)單的CSS樣式你就可以在客戶端瀏覽器中實(shí)現(xiàn)它，而且看起來(lái)很棒。2.翻轉(zhuǎn)與彈出
下一個(gè)示例將演示當(dāng)你把鼠標(biāo)放到一張圖片上時(shí)，它會(huì)彈出的效果。實(shí)現(xiàn)這些只需要使用一個(gè)hover樣式和一個(gè)度數(shù)改變。該效果的CSS如下所示。
1234
<style> img { -webkit-transform: scale(0.5); } img:hover { -webkit-transform: scale(1); }</style>
1
<img src="megan.jpg" />
鼠標(biāo)滑過(guò)圖片，它就會(huì)彈出并變大，如下所示。
The image after the rollover