細節藏在邊線裡：如何用linear-gradient打造高質感裝飾線條

2025/12/14 更新2025/12/13 發佈閱讀 4 分鐘

當我們在切版時，面對設計稿上的分隔線反應往往是寫下 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，為你的使用者介面縫上一條更有溫度的線，謝謝收看！