CSS文本效果是前端開發中非常重要的一部分。其中之一就是CSS Cap Text（大寫字母效果），也稱為文本行首大寫字母效果。

一、什麼是CSS Cap Text

CSS Cap Text是指將文本的第一個字母放大並突出顯示，以便它們在閱讀中更易於區分。這個效果通常用於文章標題、章節標題、注釋、摘要、第一個詞或首字母縮略詞以及其他可視化文字，以使它們更具有吸引力並引起讀者的關注。

二、CSS Cap Text的實現方式

實現CSS Cap Text的方式主要有3種：

1. 使用text-transform: uppercase;

2. 使用:first-letter偽元素；

3. 使用JavaScript。

下面我們來一個一個講解它們的用法。

三、使用text-transform: uppercase;

h1 {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

在上述代碼中，text-transform屬性將文本字元全部轉換為大寫字元，並將letter-spacing屬性的值設置為增加字元間距的小數。

四、使用:first-letter偽元素

h1::first-letter {
  font-size: 200%;
  font-weight: bold;
}

在上述代碼中，我們使用:first-letter偽元素來選中標題的第一個字母，然後對它應用CSS效果，例如放大和加粗。此外，我們也可以對第一個單詞或第一個字元的所有文本進行相似的更改。

五、使用JavaScript

var h1 = document.querySelector('h1');
var text = h1.textContent;
var firstLetter = '' + text.charAt(0) + '';
var restLetters = text.slice(1);
h1.innerHTML = firstLetter + restLetters;

在上述代碼中，我們使用JavaScript選中標題並獲取其第一個字母。然後，我們將該字母包裝在一個帶有.cap-text類名的元素中，並將其添加回標題中。

然後，您可以使用CSS樣式表中的.cap-text類來更改大寫字母或其他首字母的樣式。

六、CSS Cap Text的效果展示

下面是對比展示了未使用CSS Cap Text效果和使用CSS Cap Text效果的文章標題：

未使用CSS Cap Text：

the benefits of drinking water