區塊陰影

1. 至少需要 2 個尺寸值，先後表示陰影的「水平」 (x) 「垂直」 (y) 位移距離， 0 值表示沒有位移 (就是 box 的位置) 。
   -moz-box-shadow:4px 4px rgba(20%,20%,40%,0.5);
   -webkit-box-shadow:4px 4px rgba(20%,20%,40%,0.5);
   box-shadow:4px 4px rgba(20%,20%,40%,0.5);
2. 至少需要 2 個尺寸值，先後表示陰影的「水平」 (x) 「垂直」 (y) 位移距離， 0 值表示沒有位移 (就是 box 的位置) 。
   -moz-box-shadow:4px 4px rgba(20%,20%,40%,0.5);
   -webkit-box-shadow:4px 4px rgba(20%,20%,40%,0.5);
   box-shadow:4px 4px rgba(20%,20%,40%,0.5);
3. 增加第 3 個尺寸值表示陰影的模糊強度 (blur) ，當然增加模糊度也會造成陰影更透明。
   -moz-box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
   -webkit-box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
   box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
4. 使用負數位移值，呈現不同方向的陰影。
   -moz-box-shadow:-4px -4px 3px rgba(20%,20%,40%,0.5); -webkit-box-shadow:-4px -4px 3px rgba(20%,20%,40%,0.5); box-shadow:-4px -4px 3px rgba(20%,20%,40%,0.5);
5. 加第 4 個尺寸值，表示陰影的擴散強度 (spread) ，也可以強化像光暈的效果。
   -moz-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5);
   -webkit-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5);
   box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5);
6. 使用負數 spread 值，像似縮減陰影周圍。
   -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);
   -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);
   box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);
7. 在最前或最尾加 inset 變成內陰影，可呈現凹入的視覺。
   -moz-box-shadow:inset 3px 3px 3px rgba(20%,20%,40%,0.5);
   -webkit-box-shadow:inset 3px 3px 3px rgba(20%,20%,40%,0.5);
   box-shadow:inset 3px 3px 3px rgba(20%,20%,40%,0.5);
8. 內陰影加 spread 值，加強凹入的真實感。 -moz-box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;
   -webkit-box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;
   box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;