選單
×
我的 W3Schools 獲得認證 Spaces 教師專區 Plus 獲得認證 Spaces 教師專區 Plus
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

CSS 教程

CSS 主頁 CSS 簡介 CSS 語法 CSS 選擇器 CSS 如何做 CSS 註釋 CSS 顏色
顏色 RGB HEX HSL
CSS 背景
背景顏色 背景影像 背景重複 背景附加 背景簡寫
CSS 邊框
邊框 邊框寬度 邊框顏色 邊框邊 邊框簡寫 圓角邊框
CSS 外邊距
外邊距 外邊距合併
CSS 內邊距 CSS 高度/寬度 CSS 盒模型 CSS 輪廓
輪廓 輪廓寬度 輪廓顏色 輪廓簡寫 輪廓偏移
CSS 文字
文字顏色 文字對齊 文字裝飾 文字轉換 文字間距 文字陰影
CSS 字型
字型族 網路安全字型 字型回退 字型樣式 字型大小 谷歌字型 字型搭配 字型簡寫
CSS 圖示 CSS 連結 CSS 列表 CSS 表格
表格邊框 表格大小 表格對齊 表格樣式 響應式表格
CSS Display CSS Max-width CSS Position CSS Z-index CSS Overflow CSS Float
浮動 清除 浮動示例
CSS Inline-block CSS Align CSS 組合器 CSS 偽類 CSS 偽元素 CSS 透明度 CSS 導航欄
導航欄 垂直導航欄 水平導航欄
CSS 下拉選單 CSS 圖片庫 CSS 圖片精靈 CSS 屬性選擇器 CSS 表單 CSS 計數器 CSS 網站佈局 CSS 單位 CSS 特異性 CSS !important CSS 數學函式

CSS 高階

CSS 圓角 CSS 邊框圖片 CSS 背景 CSS 顏色 CSS 顏色關鍵字 CSS 漸變
線性漸變 徑向漸變 錐形漸變
CSS 陰影
陰影效果 盒子陰影
CSS 文字效果 CSS 網頁字型 CSS 2D 轉換 CSS 3D 轉換 CSS 過渡 CSS 動畫 CSS 工具提示 CSS 樣式圖片 CSS 圖片反射 CSS object-fit CSS object-position CSS 遮罩 CSS 按鈕 CSS 分頁 CSS 多列 CSS 使用者介面 CSS 變數
var() 函式 覆蓋變數 變數和 JavaScript 媒體查詢中的變數
CSS @property CSS 盒尺寸 CSS 媒體查詢 CSS MQ 示例 CSS Flexbox
CSS Flexbox CSS Flex 容器 CSS Flex 專案 CSS Flex 響應式

CSS 響應式

RWD 簡介 RWD 視口 RWD 網格檢視 RWD 媒體查詢 RWD 圖片 RWD 影片 RWD 框架 RWD 模板

CSS 網格

網格簡介 網格容器 網格項

CSS SASS

SASS 教程

CSS 示例

CSS 模板 CSS 示例 CSS 編輯器 CSS 片段 CSS 測驗 CSS 練習 CSS 網站 CSS 面試準備 CSS 訓練營 CSS 證書

CSS 參考手冊

CSS 參考 CSS 選擇器 CSS 函式 CSS 聽覺參考 CSS 網路安全字型 CSS 可動畫屬性 CSS 單位 CSS PX-EM 轉換器 CSS 顏色 CSS 顏色值 CSS 預設值 CSS 瀏覽器支援

CSS 文字陰影

❮ 上一個 下一個 ❯

文字陰影

text-shadow 屬性為文字新增陰影。

最簡單的用法是，您只需指定水平陰影 (2px) 和垂直陰影 (2px)

文字陰影效果！

示例

h1 {
  text-shadow: 2px 2px;
}
自己動手試一試 »

接下來，為陰影新增顏色 (red)

文字陰影效果！

示例

h1 {
  text-shadow: 2px 2px red;
}
自己動手試一試 »

然後，為陰影新增模糊效果 (5px)

文字陰影效果！

示例

h1 {
  text-shadow: 2px 2px 5px red;
}
自己動手試一試 »

更多文字陰影示例

示例 1

白色文字上的文字陰影

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}
自己動手試一試 »

示例 2

帶有紅色霓虹燈效果的文字陰影

h1 {
  text-shadow: 0 0 3px #ff0000;
}
自己動手試一試 »

示例 3

帶有紅色和藍色霓虹燈效果的文字陰影

h1 {
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}
自己動手試一試 »

示例 4

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
自己動手試一試 »

提示： 前往我們的 CSS 字型 章，瞭解如何更改字型、文字大小和文字樣式。

提示： 前往我們的 CSS 文字效果 章，瞭解不同的文字效果。

透過練習來測試自己

練習

將所有 <p> 元素的文字顏色更改為“red”。

<style>
p {
  : red;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

開始練習

CSS 文字陰影屬性

屬性 描述
text-shadow 指定新增到文字的陰影效果

❮ 上一個 下一個 ❯
PLUS
空格
獲取證書
面向教師
面向企業
聯絡我們
×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業，請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤，或想提出建議，請傳送電子郵件給我們
help@w3schools.com

熱門教程
HTML 教程
CSS 教程
JavaScript 教程
操作方法教程
SQL 教程
Python 教程
W3.CSS 教程
Bootstrap 教程
PHP 教程
Java 教程
C++ 教程
jQuery 教程
熱門參考
HTML 參考
CSS 參考
JavaScript 參考
SQL 參考
Python 參考
W3.CSS 參考
Bootstrap 參考
PHP 參考
HTML 顏色
Java 參考
Angular 參考
jQuery 參考
熱門示例
HTML 示例
CSS 示例
JavaScript 示例
操作方法示例
SQL 示例
Python 示例
W3.CSS 示例
Bootstrap 示例
PHP 示例
Java 示例
XML 示例
jQuery 示例
獲取證書
 HTML 證書
CSS 證書
JavaScript 證書
前端證書
SQL 證書
Python 證書
PHP 證書
jQuery 證書
Java 證書
C++ 證書
C# 證書
XML 證書
論壇 關於 學院
W3Schools 經過最佳化，旨在方便學習和培訓。示例可能經過簡化，以提高閱讀和學習體驗。
教程、參考資料和示例會不斷審查，以避免錯誤，但我們無法保證所有內容的完全正確性。
使用 W3Schools 即表示您已閱讀並接受我們的使用條款、Cookie 和隱私政策。

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援。