CSS 邊框可以用于裝飾頁面中的各種元素，例如圖片、表格、文本框等。但是，有時候我們還需要在邊框上添加一些文字來增強其信息性。那么，在 CSS 中，如何添加文字到邊框呢？下面讓我們詳細介紹一下。 首先，我們需要使用 CSS 的 `border` 屬性來定義邊框的樣式。例如，下面的代碼將一個文本框的邊框顏色設置為紅色： ``` input { border: 2px solid red; } ``` 接著，我們可以使用 CSS 的 `::before` 或 `::after` 偽元素來在邊框上添加文字。例如，下面的代碼將在文本框的左側邊框上添加一個“姓名”字樣： ``` input::before { content: "姓名"; display: block; position: absolute; left: -50px; top: 50%; transform: translateY(-50%); font-size: 14px; color: black; } ``` 代碼解析： - `content` 屬性用于指定偽元素的內容，這里設置為“姓名”。 - `display: block` 用于將偽元素設置為塊級元素，才能方便地控制其位置。 - `position: absolute` 用于將偽元素定位到其父元素的相對位置。 - `left: -50px` 用于將偽元素向左偏移 50px，使其出現在邊框外部。 - `top: 50%` 用于將偽元素垂直居中，方便用 `transform` 調整其垂直位置。 - `transform: translateY(-50%)` 用于將偽元素垂直向上偏移自身高度的一半，以實現垂直居中的效果。 - `font-size` 和 `color` 用于設置偽元素的文字大小和顏色。 類似地，我們還可以在邊框的其他位置添加文字，例如在頂部、底部、右側等。只需要調整偽元素的位置和樣式即可。 總結起來，使用 CSS 邊框添加文字可以使頁面元素更加美觀和易于理解，而 `::before` 和 `::after` 偽元素則是實現這一效果的關鍵。希望本文對你有所幫助。