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;

另外加了, 可以使用多重陰影,比如:
box-shadow: 10px 0 5px red, -10px 0 5px orange, 0 10px 5px green;

內陰影當然也可以使用
box-shadow: 0 0 10px inset orange, 0 0 20px inset red, 0 0 10px  orange;

多重陰影的話,寫在前面的會蓋掉後面的,需注意撰寫的順序。

See the Pen
css box-shadow
by deathhell (@deathhell)
on CodePen.

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...