如果想在圖片上加入陰影效果時,一般可能會需要使用到影像編輯軟體才行。但現在可以用 CSS3 的 box-shadow 屬性就能輕鬆做出陰影效果了。
檢視原始碼 CSS
1 | box-shadow: none | <shadow> [ , <shadow> ]* |
一個元素是可以套用多組陰影效果的,而一組陰影的完整設定是:
檢視原始碼 CSS
1 | box-shadow: h-shadow v-shadow blur spread color inset; |
這六個參數分別代表
檢視原始碼 CSS
1 2 3 4 5 6 | h-shadow:水平位移距離 v-shadow:垂直位移距離 blur:模糊半徑 spread:擴散距離 color:顏色 inset:內陰影 |
來看幾個簡單的範例:
檢視原始碼 HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <body> <div class="box"> <span class="caption">A</span> </div> <div class="box"> <span class="caption">B</span> </div> <div class="box"> <span class="caption">C</span> </div> <div class="box"> <span class="caption">D</span> </div> <div class="box"> <span class="caption">E</span> </div> <div class="box"> <span class="caption">F</span> </div> <div class="box"> <span class="caption">G</span> </div> <div class="box"> <span class="caption">H</span> </div> </body> |
先將它們簡單的設定一下樣式:
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .box { background-color: #fff; border: 3px solid #ccc; float: left; margin: 20px 40px 0 0; height: 65px; width: 160px; text-align: center; } .caption { font-size: 20px; position: relative; top: 20px; } |
接著就一一來練習一下各種參數的使用方式。基本上使用 box-shadow 時最少得要提供 h-shadow 及 v-shadow 兩個參數:
檢視原始碼 CSS
1 2 3 4 5 | .box:nth-child(1) { -webkit-box-shadow: 3px 3px #f3d42e; -moz-box-shadow: 3px 3px #f3d42e; box-shadow: 3px 3px #f3d42e; } |
若位移距離為正值時就是往右或往下偏移;反之則往左或往上
再加上 5px 的模糊半徑:
檢視原始碼 CSS
1 2 3 4 5 | .box:nth-child(2) { -webkit-box-shadow: 3px 3px 5px #f3d42e; -moz-box-shadow: 3px 3px 5px #f3d42e; box-shadow: 3px 3px 5px #f3d42e; } |
擴散距離會加強實際的陰影的範圍:
檢視原始碼 CSS
1 2 3 4 5 | .box:nth-child(3) { -webkit-box-shadow: 3px 3px 0 5px #f3d42e; -moz-box-shadow: 3px 3px 0 5px #f3d42e; box-shadow: 3px 3px 0 5px #f3d42e; } |
位移的距離會在加上擴散距離,所以若值為負的會減少陰影的範圍
擴散出來的部份也會套上模糊的效果:
檢視原始碼 CSS
1 2 3 4 5 | .box:nth-child(4) { -webkit-box-shadow: 3px 3px 5px 5px #f3d42e; -moz-box-shadow: 3px 3px 5px 5px #f3d42e; box-shadow: 3px 3px 5px 5px #f3d42e; } |
如果沒有設定位移距離的話,那麼模糊的效果就會直接從區塊周圍露出:
檢視原始碼 CSS
1 2 3 4 5 | .box:nth-child(5) { -webkit-box-shadow: 0 0 15px #f3d42e; -moz-box-shadow: 0 0 15px #f3d42e; box-shadow: 0 0 15px #f3d42e; } |
再加上擴散距離:
檢視原始碼 CSS
1 2 3 4 5 | .box:nth-child(6) { -webkit-box-shadow: 0 0 15px 5px #f3d42e; -moz-box-shadow: 0 0 15px 5px #f3d42e; box-shadow: 0 0 15px 5px #f3d42e; } |
另外,若在使用時加上 inset 參數的話,則原本顯示在區塊外的陰影效果就會變成是內陰影的效果了:
檢視原始碼 CSS
1 2 3 4 5 | .box:nth-child(7) { -webkit-box-shadow: 3px 3px #f3d42e inset; -moz-box-shadow: 3px 3px #f3d42e inset; box-shadow: 3px 3px #f3d42e inset; } |
有仔細注意到嗎?本來位移距離為正值時就是往右或往下偏移,但因為加上 inset 參數,所以效果就反過來了:
加上模糊半徑及擴散距離:
檢視原始碼 CSS
1 2 3 4 5 | .box:nth-child(8) { -webkit-box-shadow: 3px 3px 5px 5px #f3d42e inset; -moz-box-shadow: 3px 3px 5px 5px #f3d42e inset; box-shadow: 3px 3px 5px 5px #f3d42e inset; } |
若在元素上加了多組陰影設定的話:
檢視原始碼 CSS
1 2 3 4 5 | .box:nth-child(9) { -webkit-box-shadow: 13px 13px #f3d42e, -10px 10px #33d42e, -5px -10px #ff0d2d, 10px -8px #034d5e; -moz-box-shadow: 13px 13px #f3d42e, -10px 10px #33d42e, -5px -10px #ff0d2d, 10px -8px #034d5e; box-shadow: 13px 13px #f3d42e, -10px 10px #33d42e, -5px -10px #ff0d2d, 10px -8px #034d5e; } |
陰影的階層關係是越先設定的階層會越高~
當熟悉 box-shadow 的用法時,就能很簡單又快速的將各種元素加上更有設計感的邊框效果唷!