1. 文本陰影（text-shadow）
1.1 基本語法
text-shadow: h-shadow v-shadow blur-radius color;
參數說明：
h-shadow：必需。水平陰影的位置。允許負值。- 正值：向右偏移
- 負值：向左偏移
v-shadow：必需。垂直陰影的位置。允許負值。- 正值：向下偏移
- 負值：向上偏移
blur-radius：可選。模糊的距離。默認為0。- 值越大，模糊效果越強
- 不允許負值
color：可選。陰影的顏色。默認為文字顏色。- 可使用各種顏色表示方法：關鍵字、HEX、RGB、RGBA等
1.2 常用效果示例
- 發光效果
.glow-text {color: #ffffff;text-shadow: 0 0 10px #00ff00;
}
效果圖：
- 多重陰影
.multiple-shadow {text-shadow: 2px 2px 0 #ff0000,4px 4px 0 #00ff00,6px 6px 0 #0000ff;
}
效果圖：
- 立體文字效果
.d3-text {color: #ffffff;text-shadow: 1px 1px 1px #919191,1px 2px 1px #919191,1px 3px 1px #919191,1px 4px 1px #919191,1px 5px 1px #919191,1px 6px 1px #919191,1px 7px 1px #919191,1px 8px 1px #919191,1px 9px 1px #919191;
}
效果圖：
2. 文本溢出（text-overflow）
2.1 單行文本溢出
.single-line-ellipsis {white-space: nowrap; /* 禁止文本換行 */overflow: hidden; /* 隱藏溢出內容 */text-overflow: ellipsis; /* 顯示省略符號 */
}
參數說明：
text-overflow可選值：clip：直接裁剪文本ellipsis：顯示省略號string：使用自定義字符串（部分瀏覽器支持）
效果圖：
2.2 多行文本溢出
.multi-line-ellipsis {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; /* 顯示行數 */overflow: hidden;
}
參數說明：
-webkit-line-clamp：設置顯示的行數- 必須是正整數
- 超出的行將被截斷并顯示省略號
效果圖：
3. 換行處理（word-wrap & word-break）
3.1 word-wrap
.word-wrap-example {word-wrap: break-word; /* 允許在單詞內換行 */
}
參數說明：
word-wrap可選值：normal：只在允許的斷字點換行（默認）break-word：在單詞內部換行anywhere：任意字符間都可能換行
效果圖：
3.2 word-break
.word-break-example {word-break: break-all; /* 強制換行 */
}
參數說明：
word-break可選值：normal：使用默認的換行規則break-all：允許在任意字符間斷行keep-all：中文/韓文/日文不斷行，其他語言正常處理break-word：與word-wrap: break-word效果相同
效果圖：
