在網頁設計中，許多時候我們需要為文本添加邊框效果。常見的有hover狀態下的文本邊框，以及點擊文本后出現的邊框效果。這篇文章將介紹如何使用CSS來實現點擊文本邊框效果。

首先，我們需要給需要添加邊框效果的文本添加一個類名，例如我們為一個段落添加類名"border-text"：

<p class="border-text">這是一段需要添加邊框效果的文本</p>

接著，在CSS中定義該類名的樣式：

.border-text {
border: 2px solid #ccc;  /* 邊框樣式 */
padding: 5px;           /* 邊框內邊距 */
cursor: pointer;        /* 鼠標樣式為手型 */
}
.border-text.clicked {
border: 2px solid #f00;  /* 點擊后的邊框樣式 */
}

在這段代碼中，我們定義了兩個樣式，一個是通常狀態下的樣式，一個是點擊狀態下的樣式。初始狀態下，"border-text"類名的樣式為邊框寬度為2px、顏色為#ccc的實線邊框，內部有5px的邊距，并將鼠標樣式設置為手型。而當該文本被點擊后，我們通過添加一個"clicked"類名來改變文本的樣式，將邊框顏色改為#f00的實線邊框。

最后，我們使用JavaScript來實現點擊事件，并在點擊時為文本添加"clicked"類名：

document.querySelector('.border-text').addEventListener('click', function(e) {
e.target.classList.toggle('clicked');
});

這段代碼使用querySelector方法獲取文檔中第一個含有"border-text"類名的元素，并為其添加點擊事件。當點擊事件發生時，我們使用event.target獲取到被點擊的元素，并使用classList.toggle方法來切換"clicked"類名的添加和刪除，從而改變文本的樣式。

至此，我們就成功地實現了點擊文本邊框的效果！