css3 text-shadow

admin發表於2018-07-20
CSSS3

在此之前，如果設定文字的陰影效果，通常要利用其他工具，比如使用Photoshop製作相應的圖片，單純使用css很難實現；CSS3提供的text-shadow屬性可以實現之前難以實現的效果。

語法結構:

不同的教程中，語法結構形式的表述有所不同，總之闡述的都是一個意思，選擇最容易理解的一種:

[CSS] 純文字檢視 複製程式碼
text-shadow:[顏色 x軸 y軸 模糊半徑],[顏色 x軸 y軸 模糊半徑]...

語法註釋:

（1）.顏色:表示陰影的顏色值。

（2）.x軸:水平方向的偏移量，單位是畫素。

（3）.y軸:垂直方向的偏移量，單位是畫素。

（4）.模糊半徑:陰影的影響範圍，不能為負值，值越大越模糊。

上面的語法結構的關鍵字順序也可以有第二種形式:

[CSS] 純文字檢視 複製程式碼
text-shadow:[x軸 y軸 模糊半徑 顏色],[x軸 y軸 模糊半徑 顏色]...

陰影的顏色可以在最前面也可以在最後面。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
div{ 
  text-shadow:green 300px 0px 0px; 
  font-size:80px; 
} 
</style> 
</head> 
<body> 
<div>螞蟻部落</div>
</body> 
</html>

x軸偏移量演示，將文字的水平偏移量設定為300px，陰影顏色為綠色。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
div{ 
  text-shadow:green 0px 60px 1px; 
  font-size:80px; 
} 
</style> 
</head> 
<body> 
<div>螞蟻部落</div>
</body> 
</html>

y軸偏移量演示，將文字的垂直偏移量設定為60px，陰影顏色為綠色。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
div{ 
  text-shadow:green 10px 20px 5px; 
  font-size:80px; 
} 
</style> 
</head> 
<body> 
<div>螞蟻部落</div>
</body> 
</html>

上面的程式碼同時演示了x軸和y軸的偏移效果。

多層陰影:

所謂多層陰影，就是給文字施加多個陰影樣式，之間用逗號分隔。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
div{ 
  text-shadow:green 5px 10px 5px,blue 8px 10px 6px; 
  font-size:80px; 
} 
</style> 
</head> 
<body> 
<div>螞蟻部落</div>
</body> 
</html>

相關文章