在CSS中，我們可以通過border屬性來設置邊框的樣式、寬度、顏色等屬性，但是你知道嗎，我們也可以在邊框上寫字呢？

這個特性就是通過CSS的border-image和border-image-source屬性來實現的。

/* 定義邊框樣式 */
border-style: solid;
border-width: 5px;
border-image-source: url('border.png');
border-image-slice: 25;
border-image-width: 5;
border-image-outset: 0;

在上面的代碼中，我們通過border-style和border-width定義了邊框的樣式和寬度，然后使用border-image-source指定了邊框圖像的路徑，使用border-image-slice指定了邊框圖像的顯示方式（在這里是平鋪），使用border-image-width和border-image-outset來控制邊框的大小和位置。

有了邊框圖像之后，我們就可以在邊框上寫字了，這需要使用到CSS的border-image和::before偽元素。

/* 定義邊框樣式 */
border-style: solid;
border-width: 5px;
border-image-source: url('border.png');
border-image-slice: 25;
border-image-width: 5;
border-image-outset: 0;
/* 在邊框上寫字 */
position: relative;
z-index: 1;
padding: 10px;
}
/* 使用偽元素來實現 */
label::before {
content: 'Hello CSS Border!';
display: block;
position: absolute;
top: -20px;
left: 20px;
z-index: -1;
color: #fff;
border-style: solid;
border-width: 10px;
border-image-source: url('border.png');
border-image-slice: 25;
border-image-width: 5;
border-image-outset: 0;
}

在上面的代碼中，我們使用position屬性和z-index屬性來定位偽元素::before，使用content屬性來設置寫在邊框上的文本內容，使用top和left屬性來控制文本的位置。同時，我們也使用了::before偽元素來為文本添加了新的邊框，并將z-index屬性設置為-1，使其在原邊框下面。

有了border-image和::before偽元素，我們就可以在網頁中實現更加豐富多彩的邊框效果，讓頁面更加美觀。