容器阴影 ( box-shadow )
CSS 有三种设定阴影的方法，一种是使用图像滤镜函数，一种是文字阴影，而这篇教学会介绍最基本的“容器阴影 box-shadow”，简单又快速的替元素加上阴影，甚至做出多重阴影的效果。
快速导览：
教学影片
搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。
使用 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外缘向外延伸，内阴影从容器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 的身影。
微信扫码关注
抖音扫码关注