7.1 text-decoration 屬性
CSS 提供了各種屬性用於在網頁上設計和裝飾文字。text-decoration、 text-transform 和 text-shadow 屬性允許添加下劃線，更改文本大小寫並創建陰影，這使得文字更有表現力和吸引力。
text-decoration 屬性控制文本的裝飾效果，例如下劃線、上劃線和刪除線。它還允許設置用於裝飾文本的線條顏色和樣式。
值:
none: 去除所有文字裝飾underline: 為文字加下劃線overline: 在文字上方加線line-through: 刪除線加到文字上blink: 文字閃爍（不被所有瀏覽器支持）text-decoration-color: 設置裝飾線顏色text-decoration-style: 設置裝飾線樣式（solid, double, dotted, dashed, wavy）text-decoration-thickness: 設置裝飾線厚度
使用範例:
CSS
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.custom-decoration {
text-decoration: underline wavy red;
}
HTML
<body>
<p class="underline">這段文字是帶下劃線的。</p>
<p class="overline">這段文字是帶上劃線的。</p>
<p class="line-through">這段文字是帶刪除線的。</p>
<p class="custom-decoration">這段文字是帶紅色波浪下劃線的。</p>
</body>
7.2 text-transform 屬性
text-transform 屬性用於控制文本的轉換，改變字母的大小寫。這對於自動將文本轉換為標題、全小寫字母等等非常有用。
值:
none: 不進行轉換（默認值）capitalize: 單詞的首字母大寫uppercase: 全部轉為大寫字母lowercase: 全部轉為小寫字母full-width: 轉換為全寬（雙倍）尺寸（不被所有瀏覽器支持）
使用範例:
CSS
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
HTML
<body>
<p class="capitalize">這段文字每個單詞的首字母會大寫。</p>
<p class="uppercase">這段文字會完全變成大寫字母。</p>
<p class="lowercase">這段文字會完全變成小寫字母。</p>
</body>
7.3 text-shadow 屬性
text-shadow 屬性為文字添加陰影，這樣可以創建視覺效果並提高網頁上文字的可讀性。
值:
<offset-x>: X 軸（水平）方向陰影偏移<offset-y>: Y 軸（垂直）方向陰影偏移<blur-radius>: 陰影模糊半徑（可選）<color>: 陰影顏色（可選）
使用範例:
CSS
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.multiple-shadows {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);
}
HTML
<body>
<p class="text-shadow">這段文字有陰影。</p>
<p class="multiple-shadows">這段文字有多重陰影。</p>
</body>
代碼解釋:
text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);: 添加一個陰影，水平偏移2px，垂直偏移3px，模糊半徑為4px，半透明黑色顏色text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);: 添加不同參數的兩個陰影，創建更複雜的視覺效果
GO TO FULL VERSION