CSS邊框上有文字是一種常見的網頁設計技巧，可以為頁面帶來更加豐富的視覺效果，同時也可以提升頁面的用戶體驗。下面我們來看一下如何實現CSS邊框上有文字。

首先需要使用CSS的border屬性來設置邊框。示例代碼如下：

.box{
border:1px solid #ccc;
padding:10px;
position:relative;
}

其中，box為一個容器元素，用border屬性設置邊框，padding屬性設置文字與邊框之間的間距，position屬性設置元素的定位方式為相對定位。

接下來，在box中加入偽元素before和after，分別用來顯示左右兩側的文本。代碼如下：

.box:before{
content:"LEFT";
position:absolute;
top:-10px;
left:-40px;
font-weight:bold;
font-size:14px;
color:#f00;
transform:rotate(-90deg);
white-space:nowrap;
}
.box:after{
content:"RIGHT";
position:absolute;
top:-10px;
right:-40px;
font-weight:bold;
font-size:14px;
color:#f00;
transform:rotate(90deg);
white-space:nowrap;
}

代碼中，利用偽元素before和after添加左右兩側的文本，通過設置position為absolute屬性，實現文本與邊框之間的分離。top、left、right屬性分別控制文本的位置，font-weight和font-size屬性設置文本的字體和大小，color屬性設置字體顏色，transform屬性設置文本旋轉方向，white-space屬性控制文本不換行。

最終效果如下圖所示：

通過上述代碼，就可以實現CSS邊框上有文字的效果。