本篇文章分享如何利用 CSS 的 linear-gradient 和偽元素 ::before，創造出傳統 border 屬性無法實現的高質感裝飾線條，如同精緻縫線般的細節，為網頁增添手工質感與視覺層次。

職場

音樂藝文

以行動支持創作者！付費即可解鎖

親愛的訪客您好！我是 dizzydog，一位熱衷於前端技術的工程師。這個部落格是我的數位筆記本，記錄著我在程式開發路上的各種發現、挑戰與突破。我相信「輸出」是最有效的學習方式，透過清晰地表達所學，不僅能加深自己的理解，也能幫助其他走在相同道路上的開發者。

歡迎您在這裡探索以及交流。

學習如何運用 CSS 的 box-shadow 多層疊加特性，模擬出豐富的邊框效果，並解決網頁背景圖片被遮擋的問題。同時，深入探討如何利用偽元素 (::before / ::after) 實現精準的外部描邊，並比較兩者在應用上的優劣。

在設計網頁文字時，會需要在文字加上「底線」來強調重點，但一般的 text-decoration: underline; 有一個限制 —— 在具有多行文字時，在最後一行文字的底線無法填滿整行文字段落，而是只能到達文字尾端。

這篇文章要透過使用一小段 CSS，製作出更「優雅」的多行底線效果 