Home » CSS3 研究室

[CSS3]box-shadow 區塊陰影

[ 日期： | 瀏覽：77,040 | 迴響：搶沙發 ]
範例 1

如果想在圖片上加入陰影效果時，一般可能會需要使用到影像編輯軟體才行。但現在可以用 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;
}

若位移距離為正值時就是往右或往下偏移；反之則往左或往上
css3-box-shadow-0

再加上 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;
}

css3-box-shadow-1

擴散距離會加強實際的陰影的範圍：

檢視原始碼 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;
}

位移的距離會在加上擴散距離，所以若值為負的會減少陰影的範圍
css3-box-shadow-2

擴散出來的部份也會套上模糊的效果：

檢視原始碼 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;
}

css3-box-shadow-3

如果沒有設定位移距離的話，那麼模糊的效果就會直接從區塊周圍露出：

檢視原始碼 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;
}

css3-box-shadow-4

再加上擴散距離：

檢視原始碼 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;
}

css3-box-shadow-5

另外，若在使用時加上 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 參數，所以效果就反過來了：
css3-box-shadow-6

加上模糊半徑及擴散距離：

檢視原始碼 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;
}

css3-box-shadow-7

若在元素上加了多組陰影設定的話：

檢視原始碼 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;
}

陰影的階層關係是越先設定的階層會越高~
css3-box-shadow-8

當熟悉 box-shadow 的用法時，就能很簡單又快速的將各種元素加上更有設計感的邊框效果唷！

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

發表迴響