CSS 雙線是一種流行的設計風格，它可以提高網頁的可讀性和視覺吸引力。它通常用于分割不同的內容區域，如導航菜單、頁頭、頁尾等。CSS 雙線有兩種常見的實現方法。

//方法一：使用邊框和偽元素
.double-line {
position: relative;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.double-line::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #ccc;
}
.double-line::after {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #ccc;
transform: translateY(1px);
}

代碼中，我們首先定義了一個 .double-line 類，它有上下兩條 1px 的灰色實線邊框。接下來通過 ::before 和 ::after 偽元素來實現雙線效果。偽元素的 content 屬性必須設為空，否則無法生效。我們將 ::before 元素定位在盒子的中間，上方的50%處，然后讓其高度為1px，顏色與邊框相同。 ::after元素與 ::before元素實現類似，但是必須加上 transform: translateY(1px) 簡單的向下平移1px，這樣才能形成看起來雙線的效果。

//方法二：使用漸變
.double-line {
background-image: repeating-linear-gradient(
to bottom,
#ccc,
#ccc 1px,
transparent 1px,
transparent 5px
);
}

在上面這個例子中，我們使用顏色漸變來制作雙線。漸變屬性 repeating-linear-gradient() 接收一些參數來控制漸變的方向、顏色、及其它屬性。由于我們要使之成為垂直雙線，所以我們定義方向為 from top。我們使用 #ccc 設置兩條實線的顏色，然后用 transparent定義兩條線的間隔。較短的間距通常更好看。通過以上兩個方法，我們可以輕松地為網頁添加漂亮的 CSS 雙線。