CSS 文本陰影效果

CSS （Cascading Style Sheets） 是用於網頁設計的樣式表語言。它可以為網頁添加各種各樣的效果。本文將從多個方面詳細闡述如何在 CSS 中為文本添加陰影效果。

一、使用 text-shadow 屬性添加簡單陰影效果

  
  
<style>
  
h1 {
  
text-shadow: 2px 2px 4px #000000;
  
}
  
</style>
  

text-shadow 屬性是添加文本陰影的基本方法。它接受四個值：

• 第一個值表示陰影的水平位置。
• 第二個值表示陰影的垂直位置。
• 第三個值表示陰影的模糊程度。
• 第四個值表示陰影的顏色。

可以使用逗號分隔多個陰影效果：

  
  
<style>
  
h1 {
  
text-shadow: 2px 2px 4px #000000,
  
 -2px -2px 4px #ffffff;
  
}
  
</style>
  

二、使用 box-shadow 屬性添加陰影效果

  
  
<style>
  
h1 {
  
box-shadow: 2px 2px 4px #000000;
  
}
  
</style>
  

box-shadow 屬性是為盒子元素添加陰影效果的方法。它可以接受四個值：

• 第一個值表示陰影的水平位置。
• 第二個值表示陰影的垂直位置。
• 第三個值表示陰影的模糊程度。
• 第四個值表示陰影的顏色。

與 text-shadow 不同的是，box-shadow 會為盒子及其內容添加陰影效果。

三、 使用 outline 及 text-shadow 組合實現描邊效果

  
  
<style>
  
h1 {
  
outline: 2px solid #000000;
  
text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
  
}
  
</style>
  

outline 是用於添加輪廓線的屬性。通過設置相同或相似的文本陰影，可以實現描邊效果。

四、使用網頁字體庫實現陰影效果

除了手動添加陰影效果外，很多網頁字體庫也提供了陰影效果的選項。通過引入這些字體庫，可以輕鬆實現不同種類的文本陰影效果。

  
  
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:700" rel="stylesheet">
  
<style>
  
h1 {
  
font-family: 'Roboto Condensed', sans-serif;
  
text-shadow: 2px 2px 4px #000000;
  
}
  
</style>
  

以上代碼將 Roboto Condensed 字體庫的 700 樣式引入，並實現了簡單的陰影效果。

五、結論

本文詳細介紹了 CSS 中常用的文本陰影效果的實現方法，包括 text-shadow 屬性、box-shadow 屬性、outline 及 text-shadow 組合和網頁字體庫的使用。讀者可以根據需要選擇合適的方法實現自己的文本陰影效果。