一般的 CSS 邊框只能是單色、實線或虛線。如果想要一條「漸層色、而且會沿著四邊流動」的邊框，最省事的做法之一，是把一小段 SVG 當成 border-image 的圖片。
這個效果的好處是：邊框會自動貼合元素的大小和形狀，不管元素被拉大、縮小，或在手機、平板、電腦上寬度不同，邊框都保持完整。在客製化網頁設計裡，這類小動畫很適合用來強調表單、優惠活動或重點區塊。
效果是什麼樣子？
下面的範例是一個可以拖曳右下角改變大小的文字框（textarea），邊框是深藍、桃紅、橘、黃四色漸層，線條會沿著四邊畫出來、再收回去，不斷循環。
程式碼
HTML：
<textarea class="svg-border">SVG 的邊框魔法</textarea>CSS：
.svg-border {
font-size: 24px;
padding: 2rem 1rem;
min-height: 3em;
resize: both; /* 右下角可以拖曳改變大小 */
background: #ffd73e33;
border: 10px solid black; /* 要先有邊框寬度,border-image 才畫得出來 */
border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cstyle%3Epath%7Banimation:stroke 5s infinite linear%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%232d3561' /%3E%3Cstop offset='25%25' stop-color='%23c05c7e' /%3E%3Cstop offset='50%25' stop-color='%23f3826f' /%3E%3Cstop offset='100%25' stop-color='%23ffb961' /%3E%3C/linearGradient%3E %3Cpath d='M1.5 1.5 l97 0l0 97l-97 0 l0 -97' stroke-linecap='square' stroke='url(%23g)' stroke-width='3' stroke-dasharray='388'/%3E %3C/svg%3E") 1;
}border-image 那一長串看起來很嚇人，其實就是一段 SVG，只是為了能寫進 CSS 的 url() 裡，把 <、>、# 這些符號轉成了 %3C、%3E、%23。
那段 SVG 在做什麼？
把編碼還原後，SVG 長這樣：
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
path { animation: stroke 5s infinite linear; }
@keyframes stroke { to { stroke-dashoffset: 776; } }
</style>
<linearGradient id="g" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#2d3561" />
<stop offset="25%" stop-color="#c05c7e" />
<stop offset="50%" stop-color="#f3826f" />
<stop offset="100%" stop-color="#ffb961" />
</linearGradient>
<path d="M1.5 1.5 l97 0l0 97l-97 0 l0 -97"
stroke-linecap="square" stroke="url(#g)"
stroke-width="3" stroke-dasharray="388" />
</svg>逐段看：
linearGradient：由上到下的四色漸層，x1、x2都是 0%、y1到y2是 0% 到 100%，所以顏色是垂直變化。path：沿著 100×100 畫布的四邊畫一個正方形外框，每邊長 97，一圈總長 388。stroke-dasharray="388"：把線條設定成「畫 388、空 388」的虛線，也就是剛好一圈實線加一圈空白。- 動畫：
stroke-dashoffset從 0 移動到 776（兩圈），實線和空白輪流經過四邊，看起來就是邊框被畫出來、再被收回去。 border-image: url(...) 1：最後面的1是border-image-slice，表示從 SVG 四邊各切 1 單位當邊框素材，四個角放角落、四條邊依元素大小拉長。因為線條就畫在 SVG 的最外圈，拉長後剛好變成元素的邊框。
常見的調整
換顏色
改 stop-color 的色碼就好。注意在 CSS 裡的色碼 # 要寫成 %23，例如 #1e8a8a 要寫成 %231e8a8a。
改速度
animation:stroke 5s 的 5s 是跑一輪的秒數，數字越小越快。
改邊框粗細
改 CSS 的 border: 10px solid black 裡的 10px。黑色不會出現，只是讓瀏覽器知道邊框有多寬。
不要動畫，只要漸層
把 SVG 裡的 <style>…</style>（編碼後是 %3Cstyle%3E…%3C/style%3E）整段刪掉，再拿掉 stroke-dasharray，就是一條靜態的漸層邊框。
自己的 SVG 怎麼轉成 CSS 可用的格式？
搜尋「URL-encoder for SVG」可以找到線上轉換工具，把 SVG 貼進去就會產生可以直接放進 url() 的字串。
要圓角的話：改用 conic-gradient
border-image 有一個限制：它不會跟著 border-radius 變圓角，邊框永遠是直角。如果設計上需要圓角的漸層邊框，可以改用背景疊兩層的做法，再用 @property 讓漸層旋轉：
@property --angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
.gradient-border {
border: 6px solid transparent;
border-radius: 12px;
background:
linear-gradient(#fff, #fff) padding-box,
conic-gradient(from var(--angle), #2d3561, #c05c7e, #f3826f, #ffb961, #2d3561) border-box;
animation: spin-border 4s linear infinite;
}
@keyframes spin-border {
to { --angle: 360deg; }
}原理是：第一層白色背景只鋪到內容區（padding-box），第二層彩色漸層鋪到邊框區（border-box），邊框設成透明，露出來的就是漸層。@property 讓瀏覽器知道 --angle 是角度，才能做出平滑的旋轉動畫，目前 Chrome、Edge、Safari、Firefox 的新版本都支援。
瀏覽器支援
border-image搭配 SVG：所有現代瀏覽器都支援。- SVG 裡的 CSS 動畫：當成圖片使用時，主流瀏覽器也都會播放。
- 動畫會一直重複播放，如果頁面上有很多個，建議只用在真正需要強調的地方，也可以加上
@media (prefers-reduced-motion: reduce)，讓不喜歡動畫的使用者看到靜態版本。
延伸閱讀
想把這類細節做進自己的網站，但不想自己寫程式？正威網路行銷提供基隆網頁設計與客製化網站服務，從版面、動畫到手機版都依品牌量身設計，歡迎來聊聊。
發表留言
還沒有人留言，歡迎第一個分享你的想法或問題。留言經審核後才會顯示，Email 不會公開。