CSS能夠為文本設置邊框和背景，其中有許多方式可以完成這個任務，但在這篇文章中我們會探討一種將邊框和背景合二為一的方法。

.text-border-bg {
padding: 10px;
background-color: #f3f3f3;
border: 2px solid #ccc;
border-radius: 10px;
}

上面的代碼樣式創建一個帶有灰色背景色和灰色邊框的文本區域。 padding屬性增加了文本周圍的填充區域，并讓文本即使在沒有背景的情況下也會離邊框有一定的距離。 border屬性控制邊框的顯示和樣式，而 border-radius屬性讓邊框變得更加平滑。

為了增加效果，可以添加“box-shadow”屬性，使整個文本區域浮現在頁面上。

.text-border-bg {
padding: 10px;
background-color: #f3f3f3;
border: 2px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px #ccc;
}

代碼創建了一個陰影效果，使文本框看起來更加立體。

通過這種方式，你可以很容易地在網站上添加有趣的文本效果。試試來復制以上代碼，為你的文本區域增加一些細節效果。