在網頁設計中，邊框（border）是經常被用到的一個元素，它能夠為頁面元素提供邊框的樣式、寬度和顏色等屬性。但是，你是否知道在邊框上也可以加入文字嗎？下面，就讓我們來學習一下如何在 CSS 邊框上寫入文字。 首先，我們需要使用偽元素（pseudo-element）來實現邊框上的文字效果。偽元素是一個虛擬的元素，用于向某些選擇器添加額外的樣式或元素。 在這個例子中，我們通過使用“::before”偽元素來在邊框上添加文字。這個偽元素會在邊框外部生成一個新的元素，從而實現在邊框上添加文字的效果。 接下來，我們需要定義偽元素的樣式。在這個例子中，我們可以使用以下代碼： pre { position: relative; /* 使容器成為包含塊 */ padding: 50px; /* 元素內邊距 */ border: 10px solid #f00; /* 邊框寬度、樣式和顏色 */ } pre::before { content: "這是邊框上的文字"; /* 定義偽元素的內容 */ position: absolute; /* 偽元素定位 */ top: -25px; /* 上方定位 */ left: 50%; /* 左側定位 */ transform: translateX(-50%); /* 橫向居中 */ background-color: #fff; /* 背景色 */ padding: 5px; /* 內邊距 */ border: 2px solid #f00; /* 邊框樣式和顏色 */ } 在上面的代碼中，“::before”偽元素的內容是寫入“content”屬性中的。我們還可以通過調整“top”和“left”屬性來控制文字的位置。而“transform: translateX(-50%)”屬性則用于使文字在容器中水平居中。 最后，我們需要將 CSS 代碼添加到頁面的頭部，以便將這些樣式應用到相應的元素上。這可以通過以下代碼來實現：這樣，在容器周圍就會出現一個帶有我們指定文字的邊框了！如果需要調整文字的樣式或位置，只需更改上述 CSS 代碼即可。 總之，通過使用偽元素，我們可以很容易地在 CSS 邊框上添加文字。這個技巧可以用于各種網頁設計場景，例如添加標簽、注釋或其他類型的視覺效果。