DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> webkit博客:CSS3線性漸變樣式語法
webkit博客:CSS3線性漸變樣式語法
編輯:CSS進階教程     

之前,我在前端觀察發表了一篇《理解CSS3線性漸變》,相信很多同學都有研究過CSS3的漸變,大部分人都會感到糾結吧,webkit和firefox的語法有很大的不同啊。事實上,對比W3C規范,可以發現Firefox的語法更規范一些。現在好消息來了,Webkit開始優化CSS3漸變的語法了。真搞不懂當年(08年)webkit為什麼采用那種寫法。

具體哪種寫法更優秀就不討論了,近日webkit在其博客中介紹了漸變的新寫法,新寫法采用了W3C和Firefox所用的語法,即,將-webkit-gradient拆分為-webkit-linear-gradient和-webkit-radial-gradient。

讓我們直接看一下具體的代碼如何:

1
2
3
4
5
.selector{
background:-moz-linear-gradient(left, white, black);/*gradient for firefox*/
background:-webkit-linear-gradient(left, white, black);/*new gradient for webkit */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#white), to(#black));/*the old grandient for webkit*/
}

當然,放射漸變也同樣做了優化:

1
2
3
4
5
.selector{
background:-moz-radial-gradient(10% 30%, white, black);/*gradient for firefox*/
background:-webkit-radial-gradient(10% 30%, white, black);/*new gradient for webkit */
background:-webkit-gradient(radial, 0 10%, 0 30%, from(#white), to(#black));/*the old grandient for webkit*/
}

嗯,webkit和firefox終於可以用同樣的漸變語法了,當然,什麼時候他們都能夠去掉私有前綴最好——最好的時期是IE9也能完美支持漸變 T_T

需要注意的是,新的漸變語法只被部署到了nightly build版本的webkit上,safari和chrome都尚未真正實現,但是估計不遠了吧~

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved