容器陰影 box-shadow
CSS 有三種設定陰影的方法，一種是使用影像濾鏡函式，一種是文字陰影，而這篇教學會介紹最基本的「容器陰影 box-shadow」，簡單又快速的替元素加上陰影，甚至做出多重陰影的效果。
快速導覽：
使用 box-shadow
box-shadow 可以設定元素的「容器陰影」，沒有繼承特性，box-shadow 的屬性值為多種屬性值的組合，各個屬性值之間使用空白分隔，下方列出支援的屬性值：
| 屬性值 | 預設值 | 說明 |
|---|---|---|
| inset | - | 關鍵字屬性值，出現該屬性值後，陰影變成內陰影。 |
| offset-x | 必填數值 | 第一個數值為陰影的 x 位移 ( 使用 px )，正往左，負往右。 |
| offset-y | 必填數值 | 第二個數值為陰影的 y 位移 ( 使用 px )，正往下，負往上。 |
| blur-radius | 0 | 第三個數值為陰影的模糊半徑 ( 使用 px )，最小為 0，數值越大越模糊。 |
| spread-radius | 0 | 第四個數值為陰影的縮放半徑 ( 使用 px )，正變大，負變小。 |
| color | 元素文字顏色 | 陰影顏色，支援 CSS 所有色彩單位寫法。 |
下方列出一些符合規範寫法的 box-shadow 範例：
<!-- HTML 程式碼 -->
<div class="a">box-shadow: 10px 10px;</div>
<div class="b">box-shadow: 10px 10px 10px;</div>
<div class="c">box-shadow: 10px 10px -6px;</div>
<div class="d">box-shadow: 10px 10px 10px -6px;</div>
<div class="e">box-shadow: 10px 10px 10px -6px red;</div>
<div class="f">box-shadow: 10px 10px 10px 5px #0005;</div>
<div class="g">box-shadow: inset 10px 10px 5px #0005;</div>
<!-- CSS 程式碼 -->
<style>
div {
width: 300px;
height: 30px;
border: 1px solid #000;
margin: 20px;
padding: 5px;
font-size:14px;
}
.a {box-shadow: 10px 10px;} /* 沒有模糊的黑色陰影 */
.b {box-shadow: 10px 10px 10px;} /* 模糊的黑色陰影 */
.c {box-shadow: 10px 10px 10px -6px;} /* 模糊的縮小黑色陰影 */
.d {
color: red;
box-shadow: 10px 10px 10px -6px; /* 使用元素文字顏色的模糊又縮小的紅色陰影 */
}
.e {box-shadow: 10px 10px 10px -6px red;} /* 模糊的縮小紅色陰影 */
.f {box-shadow: 10px 10px 10px 5px #0005;} /* 模糊的放大黑色半透明陰影 */
.g {box-shadow: inset 10px 10px 5px #0005;} /* 模糊的黑色半透明內陰影 */
</style>
box-shadow 的顯示行為
因為 box-shadow 是「容器」外部的陰影，所以有下列的顯示行為：
- 陰影位於容器
border外緣。- 陰影只會呈現「矩形、圓角矩形」的形狀。
- 元素內容區域裡不會顯示陰影 ( 就算元素設定為透明背景或沒有背景圖 )。
- 陰影不會影響
padding、margin或border等容器邊界範圍。- 陰影的圖層和元素相同，在上層的元素陰影會覆蓋下層元素。
下方列出使用三個 div 作為範例，表現圓角陰影、透明背景元素的陰影以及陰影圖層的關係：
<!-- HTML 程式碼 -->
<div class="a">背景透明，元素裡沒有陰影，<br/>圓角陰影</div>
<div class="b">不會被前面元素的陰影覆蓋，<br/>但會被後面元素的陰影覆蓋</div>
<div class="c">元素位於最上層，陰影也就在最上層</div>
<!-- CSS 程式碼 -->
<style>
main {
background: orange;
padding: 20px;
}
div {
width: 200px;
height: 50px;
border: 1px solid #000;
margin: 10px;
padding: 5px;
font-size:13px;
box-shadow: 20px 20px 5px #000a;
background: #fff;
}
.a {
background: none; /* 設定元素沒有背景，可以看到下方是 main 的背景色而沒有陰影 */
border-radius: 20px; /* 陰影變成圓角 */
}
.b {border-radius: 50px;} /* 陰影變成圓角 */
.c {box-shadow: 50px -20px 10px #f00a;} /* 讓陰影往上移動，遮住上面的元素 */
</style>
多重陰影
box-shadow 可以使用「逗號 ,」分隔不同的陰影，創造出陰影「疊加」的「多重陰影」的效果，越左側的陰影所在圖層越高，會遮蔽右邊的陰影，使用時需要注意，只要某一項陰影格式寫錯，就會發生樣式錯誤而無法顯示陰影。
下方的範例實作多重陰影的效果。
<!-- HTML 程式碼 -->
<div class="a">Apple</div>
<div class="b">Banana</div>
<div class="c">OXXO</div>
<!-- CSS 程式碼 -->
<style>
div {
width: 200px;
height: 50px;
border: 1px solid #000;
margin: 30px;
padding: 5px;
text-align: center;
}
.a {
box-shadow:
2px 2px red,
4px 4px orange,
6px 6px yellow,
8px 8px green,
10px 10px blue,
12px 12px purple;
}
.b {
box-shadow:
2px 2px 2px red,
4px 4px 4px orange,
6px 6px 6px yellow,
8px 8px 8px green,
10px 10px 10px blue,
12px 12px 12px purple;
}
.c {
box-shadow:
0 5px 0 -2px #555,
0 10px 0 -4px #555,
0 15px 0 -6px #444,
0 20px 0 -8px #333,
0 25px 0 -10px #222,
0 30px 0 -12px #222,
0 35px 0 -14px #222,
0 40px 0 -16px #111,
0 45px 0 -18px #111,
0 50px 0 -20px #111,
0 55px 20px -15px #000b;
}
</style>
不可置換行內容器的陰影
雖然不可置換行內容器無法調整寬高 ( 文字樣式的顯示類型大多都是 inline )，但卻可以透過 padding 或 border 增加元素容器的範圍，又因為陰影是從 border 外緣開始擴展，如果有設定不可置換行內容器的 padding 或 border，就會發生陰影覆蓋到其他內容，或元素內容換行後陰影斷開等奇妙效果。
不可置換行內容器表示不會透過 src 等屬性改變元素內容。
下方的範例設定了 strong 和 em 這兩個行內容器元素的 padding 數值，最後就會呈現奇妙的陰影效果。
<!-- HTML 程式碼 -->
<div>
<span><strong>STEAM 教育學習網</strong>透過免費且高品質的<em>教學與範例</em>讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
</div>
<!-- CSS 程式碼 -->
<style>
div {
width: 200px;
height: 50px;
border: 1px solid #000;
margin: 50px;
padding: 5px;
}
strong {
padding: 30px 10px;
box-shadow: 2px 2px 5px 5px red;
}
em {
padding: 30px 10px;
box-shadow: 2px 2px 5px 5px blue;
}
</style>
可置換行內容器的陰影
網頁中的圖片元素 img 或 svg 都屬於「可置換」行內容器 ( 顯示類型大多都是 inline-block )，這些元素都是矩形的容器，套用陰影後的效果大致上和其他元素套用陰影的效果相同，但內陰影會被圖片本身遮住，需要注意透明背景的圖片，套用陰影後仍然會使用「矩形」方式呈現陰影，如果要完美呈現陰影，可以參考「drop-shadow()」。
下方的範例會替圖片加入陰影，可以觀察透明背景圖片使用陰影和內陰影產生的有趣效果。
<!-- HTML 程式碼 -->
<img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
<img src="https://steam.oxxostudio.tw/image/index-css.jpg">
<img class="a" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
<!-- CSS 程式碼 -->
<style>
body {
background: yellow;
}
img {
margin: 10px;
width: 200px;
box-shadow: 5px 5px 10px;
}
.a {
box-shadow: inset 5px 5px 40px 10px;
}
</style>
將陰影當作邊框使用
在網頁排版時，因為「邊框寬度」會影響容器範圍，進而造成排版的連鎖反應 ( 一個推擠一個 )，如果要避開邊框寬度的影響，也能使用「不具有模糊的陰影」，就能讓陰影偽裝成邊框，這種做法甚至可以使用多重陰影的效果，做出混合多種顏色的邊框。
下方範例會使用陰影代替邊框，做出三種不同的「偽」邊框。
<!-- HTML 程式碼 -->
<div class="a">Apple</div>
<div class="b">Banana</div>
<div class="c">OXXO</div>
<!-- CSS 程式碼 -->
<style>
div {
width: 100px;
height: 50px;
padding: 5px;
margin: 30px;
}
.a {box-shadow: 0 0 0 2px;}
.b {box-shadow: 0 0 0 8px pink;}
.c {
box-shadow:
0 0 0 2px red,
0 0 0 4px orange,
0 0 0 6px yellow,
0 0 0 8px green,
0 0 0 10px blue,
0 0 0 12px purple;
}
</style>
下方範例中的第一組選單使用邊框 ( 黃色背景 ) ，可以發現滑鼠移動上去時，會產生不順暢的推擠現象，而第二組選單使用陰影代替邊框 ( 橘色背景 )，就不會有這種狀況。
<!-- HTML 程式碼 -->
<div class="a">
<a href="">apple</a>
<a href="">banana</a>
<a href="">oxxo</a>
</div>
<div class="b">
<a href="">apple</a>
<a href="">banana</a>
<a href="">oxxo</a>
</div>
<!-- CSS 程式碼 -->
<style>
div {
margin: 30px;
}
.a a {
background: yellow;
padding: 10px;
border: 1px solid #000;
transition: .3s;
}
.a a:hover {
border: 5px solid #000;
}
.b a {
background: orange;
padding: 10px;
box-shadow: 0 0 0 1px #000;
transition: .3s;
}
.b a:hover {
box-shadow: 0 0 0 5px #000;
}
</style>
小結
使用 box-shadow 可以很快速的替元素添加陰影效果，是許多網站常用的樣式屬性，不論是滑鼠懸停或凸顯特殊元素，都常常會看見 box-shadow 的身影。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～