2011年12月26日 星期一

CSS的box-shadow

你要讓你的網頁有質感,有幾個很快的方法,一個是讓他多了點漸層的效果,另一個則是讓他加上一點陰影,這個在以前用photoshop處理起來很快,但是在網頁上就有點麻煩,好在CSS3開始支援box的漸層跟陰影效果,以後要做這種效果就輕鬆很多了。

CSS3的box-shadow屬性如下:
box-shadow:陰影類型 水平位移 垂直位移 陰影半徑 陰影擴展 陰影顏色

開始測試
390085_2824503581520_777133721_n
box-shadow:2px 2px 10px #06C ;顏色可以用顏色的敘述,如上的16進位顏色碼,或是使用RGB都可以。
391920_2824503821526_1603023939_n
box-shadow: 0 0 10px rgba(0, 255, 0, .6);使用RGB可以多帶一個Alpha值的屬性設定透明度。
377889_2824503901528_293681739_n
box-shadow: 0 0 10px 5px rgba(0, 255, 0, .6);如果增加擴展屬性,可以讓陰影更強烈一點。

陰影類型預設是向外,如果想要製作內陰影,只要再設定陰影屬性就可以了。
387853_2824503981530_897822299_n
inset 0 0 10px #000000;

還有更多應用可以參考這幾個網頁:
CSS3属性box-shadow使用教程
CSS Box Shadow
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...