LaZy cOdE: css3 box-shadow

2011/03/13

box shadow 可以好易幫d box 打陰影

圖片都得, 但inset 就冇效果

支援的browser: firefox, chrome, safari, opera, ie9

ff4 以上先supoort 冇browser prefix

.box_shadow{

box-shadow: 5px -5px 8px 3px #0000ff, -10px -10px 15px 5px #ff0000 inset;

-webkit-box-shadow: 5px -5px 8px 3px #0000ff, -10px -10px 15px 5px #ff0000 inset;

-moz-box-shadow: 5px -5px 8px 3px #0000ff, -10px -10px 15px 5px #ff0000 inset;

}

第1個 (5px): x 的偏離, 正數係右面, 負數係左面

第2個 (-5px): y 的偏離, 正數係下面, 負數係上面

第3個 (8px): blur 的長度, 個影的邊邊幾長 (可有可無)

第4個 (3px): 影的大小, 每邊長多幾多px (可有可無)

第5個 (#0000ff): 影的顏色

第6個 (inset): 影是向外定向內 (ourset/ inset), default 係outset (可有可無) (向內的話唔計padding)

可以set多過一個shadow, 用',' 分隔

.box_shadow 的效果

LaZy cOdE