CSS 陰影效果
使用 CSS 可以建立陰影效果！
將滑鼠懸停在我身上！
CSS 陰影效果
使用 CSS，您可以為文字和元素新增陰影。
在這些章節中，您將瞭解以下屬性
CSS 文字陰影
CSS text-shadow 屬性為文字應用陰影。
在最簡單的用法中，您只需指定水平陰影 (2px) 和垂直陰影 (2px)
文字陰影效果！
接下來，為陰影新增顏色
文字陰影效果！
示例
h1 {
text-shadow: 2px 2px red;
}
自己動手試一試 »
然後，為陰影新增模糊效果
文字陰影效果！
示例
h1 {
text-shadow: 2px 2px 5px red;
}
自己動手試一試 »
以下示例顯示帶有黑色陰影的白色文字
文字陰影效果！
示例
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
自己動手試一試 »
以下示例顯示紅色霓虹發光陰影
文字陰影效果！
示例
h1 {
text-shadow: 0 0 3px #FF0000;
}
自己動手試一試 »
多重陰影
要為文字新增多個陰影，您可以新增逗號分隔的陰影列表。
以下示例顯示紅色和藍色霓虹發光陰影
文字陰影效果！
示例
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
自己動手試一試 »
以下示例顯示帶有黑色、藍色和深藍色陰影的白色文字
文字陰影效果！
示例
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
自己動手試一試 »
您還可以使用 text-shadow 屬性為某些文字建立純邊框（無陰影）
文字邊框！
示例
h1 {
color: coral;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
自己動手試一試 »
W3schools 學習路徑
跟蹤您的進度 - 免費！
