跳到主要內容

陰影效果 shadow

box-shadow:水平偏移 垂直偏移 模糊 擴展量 顏色

例:
box-shadow: 20px 20px #333333;
-webkit-box-shadow: 20px 20px #333333;
產生右下角無模糊的陰影

box-shadow: 20px 20px 10px #333333;
-webkit-box-shadow: 20px 20px 10px #333333;
產生右下角模糊的陰影

box-shadow: 20px 20px 10px #333333, 10px 10px 20px #ff0000;
-webkit-box-shadow: 20px 20px 10px #333333, 10px 10px 20px #ff0000;
產生兩個不同顏色、不同位置的陰影

box-shadow: 20px 20px 10px #333333 inset;
產生內陰影

box-shadow: 20px 20px 10px #333333 inset, 10px -10px 20px #ff0000 inset;
產生左上角灰色內陰影、右角下紅色內陰影

box-shadow: 0px 0px 40px #333333;
產生光暈效果