CSS3

運用CSS3將背景填入漸層色,前一篇有介紹過文字陰影、區塊陰影、區塊圓角,這個效果IE有支援,下面試CSS3漸層色寫法,說明用圖片說明。

For IE 瀏覽器
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#FFFFFF’, endColorstr=’#cc0066′);

For Safari、Chrome 瀏覽器
background: -webkit-gradient(linear, left top, right bottom, from(#FFF), to(#C06));

For Firefox 3.6+(火狐) 瀏覽器
background: -moz-linear-gradient(top,  #FFF,  #C06);

 

照上面的值去設置會看到粉紅色漸層,如下圖所示。

 

再來就是運用部份拉,下面的下拉是選單是沒有Javascript純以CSS製作出來。連 結

 

再來就是把所有的的效果運用到按鈕上,如文字陰影、圓角、漸層…等等,感覺就會不一樣,下面的選單沒有用到任何一張圖片。連 結

 

Nick La的blog有相關教學,大家也可以去那挖寶,CSS3的新屬性也是從Nick La所得知,去外國網站挖寶有個好處,就是他不怕讓你知到,只怕你不來看,附上面兩的示範的html檔連結,你們自己看程式碼吧,去Nick La的blog他有作一個仿MAC的下拉選單,我也搞了兩天(兩天也是東摸摸西摸摸的搞)把它原理搞懂,上面兩個範例就是我搞懂得結果。

最後修改日期: 2019 年 2 月 21 日

作者