如何使用 CSS 實現文本裝飾效果

一、下劃線效果

下劃線作為常見的文本裝飾效果，可以通過 CSS 的 text-decoration 屬性設置。具體代碼如下：

  p {
    text-decoration: underline; /* 設置下劃線 */
  }

此外，text-decoration 還支持多個值的設置：

  /* 下劃線加粗、顏色為紅色，且鼠標懸浮時變成虛線 */
  p {
    text-decoration: underline red;
    text-decoration-style: double; /* 下劃線樣式設置為雙下劃線 */
    text-underline-offset: 5px; /* 下劃線距離文本的距離為 5 像素 */
    text-decoration-thickness: 3px; /* 下劃線粗細為 3 像素 */
    text-decoration-skip-ink: auto; /* 避免下劃線被截斷，自動處理 */
  }

二、刪除線效果

刪除線是一種常用的文本裝飾方式，可以在文本中添加刪除線效果進行標註。實現方式如下：

  p {
    text-decoration: line-through; /* 設置刪除線 */
  }

同樣的，text-decoration 屬性還支持多個值的設置：

  /* 刪除線加粗、顏色為紅色，且鼠標懸浮時變成虛線 */
  p {
    text-decoration: line-through red;
    text-decoration-style: dotted; /* 刪除線樣式設置為點狀 */
    text-decoration-thickness: 2px; /* 刪除線粗細為 2 像素 */
    text-underline-offset: 2px; /* 刪除線距離文本 2 像素 */
    text-decoration-skip-ink: none; /* 刪除線不被自動處理 */
  }

三、文本陰影效果

除了下劃線和刪除線之外，文本陰影效果也是一種常用的裝飾方式。陰影效果可以通過 CSS 的 text-shadow 屬性設置：

  p {
    text-shadow: 2px 2px 2px #333; /* 設置文本陰影 */
  }

text-shadow 屬性有四個值，分別代表陰影的水平偏移量、垂直偏移量、模糊半徑和陰影顏色。可以根據需要調整這四個值，實現不同的陰影效果。

四、字體顏色漸變效果

顏色漸變是一種常用的文本裝飾方式，可以通過漸變效果使文本具有視覺衝擊力。實現方式如下：

1、線性漸變：

  p {
    background: linear-gradient(to right, red, yellow); /* 設置顏色漸變，方向從左到右 */
    -webkit-background-clip: text; /* 限制背景漸變的範圍為文本區域 */
    -webkit-text-fill-color: transparent; /* 將文本顏色設置為透明 */
  }

2、徑向漸變：

  p {
    background: radial-gradient(red, yellow); /* 設置徑向漸變 */
    -webkit-background-clip: text; /* 限制背景漸變的範圍為文本區域 */
    -webkit-text-fill-color: transparent; /* 將文本顏色設置為透明 */
  }

五、文本描邊效果

文本描邊效果是一種比較常用的文本裝飾方式，通常用於強調文本效果。實現方式如下：

1、使用 text-stroke 屬性實現：

  p {
    -webkit-text-stroke: 1px black; /* 文本描邊，顏色為黑色，描邊寬度為 1 像素 */
    color: white; /* 文本顏色為白色 */
  }

2、通過 text-shadow 屬性實現：

  p {
    color: white; /* 文本顏色為白色 */
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* 文本陰影設置多個值，實現描邊效果 */
  }

六、傾斜字體效果

傾斜字體效果是一種非常特殊的文本裝飾方式，可以通過 transform 屬性實現：

  p {
    transform: skew(20deg, 10deg); /* 水平和垂直方向傾斜角度分別為 20 度和 10 度 */
    display: inline-block; /* 將文本轉換為塊元素，以便設置背景顏色 */
    background: yellow; /* 設置背景顏色 */
  }

七、文本動畫效果

文本動畫效果是一種非常炫酷的裝飾方式，可以通過 CSS3 的動畫屬性實現：

  p {
    animation: glitter 2s infinite alternate; /* 設置動畫效果，持續時間為 2 秒，往返播放，無限循環 */
    background: -webkit-linear-gradient(#eee, #333); /* 設置背景顏色為漸變 */
    -webkit-background-clip: text; /* 在文本區域內顯示背景 */
    -webkit-text-fill-color: transparent; /* 將文本顏色設置為透明 */
  }
  /* 定義動畫關鍵幀 */
  @keyframes glitter {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
  }

以上代碼會給文本添加一個閃爍的動畫效果，讓文本更加生動、吸引人眼球。