Home » CSS3 研究室

[CSS3]box-shadow 區塊陰影

範例 1

如果想在圖片上加入陰影效果時,一般可能會需要使用到影像編輯軟體才行。但現在可以用 CSS3box-shadow 屬性就能輕鬆做出陰影效果了。

1
box-shadow: none | <shadow> [ , <shadow> ]*

一個元素是可以套用多組陰影效果的,而一組陰影的完整設定是:

1
box-shadow: h-shadow v-shadow blur spread color inset;

這六個參數分別代表

1
2
3
4
5
6
h-shadow:水平位移距離
v-shadow:垂直位移距離
blur:模糊半徑
spread:擴散距離
color:顏色
inset:內陰影

來看幾個簡單的範例:

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>

先將它們簡單的設定一下樣式:

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-shadowv-shadow 兩個參數:

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 的模糊半徑:

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

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

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

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

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

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

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

再加上擴散距離:

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 參數的話,則原本顯示在區塊外的陰影效果就會變成是內陰影的效果了:

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

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

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

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

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

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

發表迴響