Home » CSS3 研究室

[CSS3]text-shadow 文字陰影

[ 日期： | 瀏覽：53,718 | 迴響：2 ]
範例 1

在 CSS3 中除了能將區塊加上陰影之外，也能針對一般文字加上 text-shadow 文字陰影的效果，進而產生像是會發光或是有 3D 立體效果。

檢視原始碼 CSS
1

text-shadow: none | [ <length>{2,3} && <color>? ]#

一段文字可以套用多組陰影效果，而一組陰影的完整設定是：

檢視原始碼 CSS
1

text-shadow: h-shadow v-shadow blur spread color;

基本上參數的用法跟 box-shadow 區塊陰影 的是一樣的，只差在沒有 inset 內陰影的參數而已：

檢視原始碼 CSS
1
2
3
4
5

h-shadow：水平位移距離
v-shadow：垂直位移距離
blur：模糊半徑
spread：擴散距離
color：顏色

一樣來直接看範例吧~

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<body>
	<div class="text">
		HTML5 & CSS3
	</div>
 
	<div class="text">
		HTML5 & CSS3
	</div>
 
	<div class="text">
		HTML5 & CSS3
	</div>
 
	<div class="text">
		HTML5 & CSS3
	</div>
</body>

基本的設定文字顏色、大小：

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9

.text {
	background-color: #ccc;
	height: 100px;
	font-size: 32px;
	color: #656d78;
	line-height: 100px;
	text-align: center;
	margin: 20px 0;
}

現在還未套上任何的文字陰影效果
css3-text-shadow-0

加上簡單的陰影：

檢視原始碼 CSS
1
2
3

.text:nth-child(1) {
	text-shadow: 2px 2px #434a54;
}

h-shadow 或 v-shadow 為正值時的陰影是往右及往下；反之則往左往上
css3-text-shadow-1

若想要有模糊的效果的話，就要指定 blur 值：

檢視原始碼 CSS
1
2
3

.text:nth-child(2) {
	text-shadow: 2px 2px 3px #434a54;
}

css3-text-shadow-2

如果要套上多組陰影效果的話，只要每組陰影設定間加上逗號(comma)區隔就可以了：

檢視原始碼 CSS
1
2
3

.text:nth-child(3) {
	text-shadow: 2px 2px 3px #0f0, 10px 10px 3px #f00, -10px -5px 3px #00f;
}

css3-text-shadow-3

若想讓文字產生光暈(發光)效果的話，一樣可以使用 text-shadow。除了用來裝飾文字之外，也能使跟圖片重疊的文字變的更好閱讀。

檢視原始碼 CSS
1
2
3

.text:nth-child(4) {
	text-shadow: 0px 0px 10px #fff;
}

筆者在這範例上沒加上任何位置的偏移，只有在原地產生模糊效果
css3-text-shadow-4

But...您看的出來有什麼陰影嗎？有發光嗎？都沒有吧~這是因為陰影顏色太淺，然後又只有一層陰影，所以看不出效果來。現在筆者將同一種陰影效果累加多次：

檢視原始碼 CSS
1
2
3

.text:nth-child(4) {
	text-shadow: 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff;
}

正所謂團結力量大...有看到那道光了嗎XD
css3-text-shadow-5

text-shadow 除了產生陰影之外，只要配合其它不同的 CSS 設計後，就能玩出意想不到的效果的唷。

範例 1

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

2 筆針對 [CSS3]text-shadow 文字陰影 的迴響

    • "Learning jQuery" 這本書我覺得寫的很不錯, 中譯本的話就是 "jQuery 開發實戰", 不過可能絕版了!
      至於 CSS3 的話, 我是覺得買本 HTML/CSS 的字典書, 然後翻一翻看一看有那些屬性!

發表迴響