Loading...
box-shadow 針對區塊來建立陰影。
box-shadow
預設值是 none:
語法:
單一顏色,以下樣式為例,black 陰影,且向右移動 5px ,向下移動 10px。
例:
相同語法,只是以逗號做分隔:
最後面加上 inset 即可:
inset
常搭配 :active ,滑鼠左鍵按壓下去,不放開的狀態。例:
:active
box-shadow: none;
box-shadow: 水平位移 垂直位移 模糊 擴散 顏色 inset;
div.test{ background-color: red; color: white; box-shadow: 5px 10px black; }
div.test{ background-color: red; color: white; width: 200px; /* 水平 垂直 模糊 顏色 */ box-shadow: 5px 5px 5px black; }
div.test{ background-color: red; color: white; width: 200px; /* 水平 垂直 模糊 擴散 顏色 */ box-shadow: 5px 5px 0px 5px black; }
div.test{ background-color: red; color: white; width: 200px; box-shadow: 5px 5px black, 10px 10px green; }
box-shadow: 5px 5px 0px 0px black inset;