7.1 text-shadow 屬性
在 CSS 中，text-shadow 屬性可以為文字添加陰影，創造立體效果並改善視覺感受。 此屬性提供了設置陰影的靈活性，包括控制偏移、模糊和陰影顏色。
text-shadow 屬性為元素內的文字設置陰影。它允許控制陰影的位置、模糊程度 和顏色，為文字元素添加視覺重點。
語法：
element {
text-shadow: offset-x offset-y blur-radius spread-radius color;
}
參數：
offset-x: 水平陰影偏移offset-y: 垂直陰影偏移blur-radius: 陰影模糊半徑（非必需）color: 陰影顏色（非必需）
值：
offset-x和offset-y: 設置陰影相對於文字的偏移。可以是正值或負值blur-radius: 定義陰影的模糊程度。值越大，陰影越模糊。默認值為 0（無模糊）color: 設置陰影的顏色。如果未指定顏色，則使用文字的顏色
使用範例：
CSS
.shadow-basic {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
.shadow-blur {
font-size: 24px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.shadow-color {
font-size: 24px;
text-shadow: 2px 2px 2px red;
}
.shadow-multiple {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 2px rgba(0, 0, 0, 0.3);
}
HTML
<body>
<p class="shadow-basic">基本陰影</p>
<p class="shadow-blur">模糊陰影</p>
<p class="shadow-color">有顏色的陰影</p>
<p class="shadow-multiple">多重陰影</p>
</body>
代碼說明：
.shadow-basic: 應用簡單的陰影，水平和垂直偏移2px，模糊半徑2px，半透明黑色.shadow-blur: 添加較大的模糊度（5px），創造更模糊的陰影.shadow-color: 應用帶有顏色的陰影（紅色）.shadow-multiple: 應用兩個陰影，具有不同的偏移和模糊，創造複雜的多層效果
7.2 範例
1. 柔和陰影
帶有較大模糊半徑的柔和陰影：
CSS
.soft-shadow {
font-size: 24px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
HTML
<body>
<p class="soft-shadow">文字的柔和陰影</p>
</body>
代碼說明：
.soft-shadow: 應用不帶偏移且具有大模糊半徑（10px）的柔和陰影，創造輕微的發光效果
2. 鮮艷陰影
帶有鮮豔色彩和小模糊的陰影：
CSS
.colorful-shadow {
font-size: 24px;
text-shadow: 3px 3px 5px blue;
}
HTML
<body>
<p class="colorful-shadow">鮮豔色彩的陰影</p>
</body>
代碼說明：
.colorful-shadow: 應用鮮豔顏色的陰影（藍色），偏移3px和模糊半徑5px
3. 多重陰影
具有不同參數的多重陰影：
CSS
.multi-shadow {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 5px rgba(255, 0, 0, 0.5);
}
HTML
<body>
<p class="multi-shadow">多重文字陰影</p>
</body>
代碼說明：
.multi-shadow: 應用兩個不同參數的陰影：一個具有小偏移和模糊，另一個具有大偏移和紅色模糊
7.3 重要點
使用 text-shadow 的重要點
瀏覽器兼容性
text-shadow 屬性受現代瀏覽器支持，包括 Google Chrome、Firefox、Safari、Edge 和 Opera。 但是，為了確保跨瀏覽器的兼容性，請務必檢查舊版本瀏覽器的陰影顯示。
性能
使用具有大量偏移和模糊的複雜陰影可能會影響性能，特別是在移動設備上。請優化陰影以獲得更好的性能，並在各種設備上進行測試。
可讀性
確保陰影不會降低文字的可讀性。文字與背景之間的對比度應保持足夠，以便所有用戶（包括視障人士）都能輕鬆閱讀。
text-shadow 屬性在 CSS 中提供了創建文字陰影的強大工具。它允許從簡單的陰影到具有不同顏色和模糊的複雜多層陰影。
使用 text-shadow 有助於改善文字的視覺感受，為網頁設計增添深度和層次感。重要的是要記住使用複雜陰影時的瀏覽器兼容性和性能問題，以及確保所有用戶的可讀性。
GO TO FULL VERSION