CSS 邊框分成三塊是一個常見的頁面布局方式，常用于制作垂直對齊的視覺效果。該效果的實現方式是利用 CSS 的 border 屬性。

首先，我們需要將元素的寬度設置為我們想要的寬度，并且設置顯示模式為塊級元素：

.box {
width: 300px;
display: block;
}

接下來，我們可以通過 border 屬性來設置邊框樣式。為了實現三塊分開的效果，我們需要設置上下邊框的寬度為我們想要的值：

.box {
width: 300px;
display: block;
border-top: 2px solid red;
border-bottom: 2px solid red;
}

此時我們會發現，出現了一個問題：左右兩側的邊框還是默認的樣式。我們可以通過 CSS 偽類來解決這個問題：

.box {
width: 300px;
display: block;
border-top: 2px solid red;
border-bottom: 2px solid red;
}
.box:before,
.box:after {
content: '';
display: inline-block;
vertical-align: middle;
width: 10px;
height: 100%;
border-top: 2px solid red;
border-bottom: 2px solid red;
}
.box:before {
margin-right: 10px;
}
.box:after {
margin-left: 10px;
}

通過使用偽類 :before 和 :after，我們可以為元素添加左右兩側的邊框。此時，我們會發現元素的寬度增加了 20px，因為我們為左右兩側添加了寬度為 10px 的邊框。我們可以通過 box-sizing 屬性來解決這個問題：

.box {
width: 300px;
display: block;
border-top: 2px solid red;
border-bottom: 2px solid red;
box-sizing: border-box;
}
.box:before,
.box:after {
content: '';
display: inline-block;
vertical-align: middle;
width: 10px;
height: 100%;
border-top: 2px solid red;
border-bottom: 2px solid red;
}
.box:before {
margin-right: 10px;
}
.box:after {
margin-left: 10px;
}

現在，我們成功地實現了 CSS 邊框分成三塊的效果。