當我們在切版時，面對設計稿上的分隔線反應往往是寫下 border-bottom: 1px solid #000;。若是想要一點變化，也許會改成 dashed 或 dotted，或者可以使用偽元素::before或::after，但你是否曾覺得，border預設的虛線樣式太過呆版，圓點太圓，且間距無法調整，顏色也只能選一種。
今天來分享一段透過 linear-gradient 模擬出的高質感裝飾線條，為你的網頁帶來彷彿「精緻縫線」般的細節。
傳統邊線的極限
普通的 border 屬性雖然方便，但它的極限在於：
- 無法控制節奏：你不能決定虛線的長度是 5px 而間距是 2px。
- 無法多色混合：一條邊線只有一種顏色。
而透過 CSS 的 background 來繪製線條，我們可以像像素畫家一樣，精確控制這條線上的每一個像素。
::before + background: linear-gradient 代碼解析
讓我們來看看如何透過CSS實現如上圖的效果：
.container::before {
content: "";
width: 100%;
min-height: 2px;
position: absolute;
top: 50%;
right: 0;
/* 重點在這裡 */
background: linear-gradient(
to right,
#DEE4E7 0,
#DEE4E7 2px, /* 第一段顏色：2px 寬 */
transparent 2px,
transparent 3px, /* 第一段間距：1px 寬 */
#D2DDE2 3px,
#D2DDE2 4px, /* 第二段顏色（較短）：1px 寬 */
transparent 4px,
transparent 5px /* 第二段間距：1px 寬 ， 以上為一個循環*/
);
background-size: 5px 2px; /* 定義一個循環的總寬度 */
background-repeat: repeat-x;
}
這段代碼創造的不是一條邊線，而是一個像素圖案的無限循環。就像是花磚作品一樣，background-size: 5px 2px; 定義了一個 5px 寬的「花磚」，這塊花磚的內容是：
- 0px - 2px: 淺灰藍色實線 (長度 2px)
- 2px - 3px: 透明 (間距 1px)
- 3px - 4px: 深一點的灰藍色 (長度 1px)
- 4px - 5px: 透明 (間距 1px)
藉由設定不同顏色以及長度的小磁磚，可以拼貼出具有節奏感(長——空—短—空)的效果，且配合#DEE4E7 和 #D2DDE2 兩個非常接近但略有深淺的顏色，這些細微的差異，讓螢幕上的單純像素彷彿縫紉機留下的縫線，為網頁添加了一份手工感。
此外，透過使用 transparent（透明），讓背景圖案可以透出來，使得分隔線與整體頁面融合得更自然，不會像實線那樣產生強烈的「切割感」。
最後附上codePen，這裡為了清楚起見，將我們的「花磚」放大了十倍！
結語
網頁設計的質感往往不是來自於詳細的資訊或酷炫的動畫，而是來自於這些 1px、2px 的微小堅持。下次當你想用 border 時，不妨試試看::before 結合linear-gradient，為你的使用者介面縫上一條更有溫度的線，謝謝收看！
