CSS 畫線連接框是一項非常有用的技術，可以用來美化 HTML 頁面并提升用戶體驗。下面是如何使用 CSS 畫線連接框的方法。

.border{
border: 1px solid black; /* 定義邊框 */
padding: 10px; /* 定義內邊距 */
position: relative; /* 設置為相對定位 */
}
.border::before{
content: ''; /* content 屬性必須存在 */
position: absolute; /* 設置為絕對定位 */
top: 0; /* 上方對齊 */
bottom: 0; /* 下方對齊 */
left: -1px; /* 向左移動一個像素 */
border-left: 1px solid black; /* 左邊框 */
}
.border::after{
content: ''; /* content 屬性必須存在 */
position: absolute; /* 設置為絕對定位 */
top: 0; /* 上方對齊 */
bottom: 0; /* 下方對齊 */
right: -1px; /* 向右移動一個像素 */
border-right: 1px solid black; /* 右邊框 */
}
.border::before,
.border::after{
width: 10px; /* 寬度為 10 像素 */
z-index: -1; /* 位于最下層 */
}

以上代碼中，我們定義了一個名為.border的 class，用來設定元素的邊框及內邊距，并設置了相對定位。接著使用::before偽類和::after偽類，分別創建左右兩個邊框。我們使用偽元素的content屬性來占用頁面上的一個空間，然后對其設置相對定位，使之與父元素對齊。最后設定了寬度和 z-index 值。

通過以上代碼，我們就可以輕松地實現一個帶有線連接框的 HTML 元素。這種方法可以用在各種頁面元素上，如導航欄、表格、圖片等等，讓頁面更加美觀和易于閱讀。