一般的 CSS 邊框只能是單一顏色。如果想讓重點按鈕或活動區塊更顯眼，可以做一條彩色漸層、而且顏色會慢慢流動的邊框：夠吸睛，又不會太花俏。
這篇整理兩種純 CSS 寫法，不需要 JavaScript，也不用圖片：
- 偽元素寫法（這篇文章原本的寫法）：用
::after在後面墊一層漸層 - 雙層背景寫法（推薦）：一層背景鋪內容、一層背景鋪邊框
效果是什麼樣子？
一個深灰色的方塊，外圍有一圈 3px 的彩色邊框，橘、粉紅、紫、藍、綠幾種顏色在邊框上來回流動，大約 3 秒一個循環。
寫法一：用偽元素墊一層漸層
HTML：
<div class="gradient-border" id="box">CSS 範例<br>CSS<br>效果</div>CSS：
#box {
display: flex;
align-items: center;
justify-content: center;
width: 400px;
height: 200px;
color: white;
font-size: 2.5rem;
}
.gradient-border {
--border-width: 3px;
position: relative;
background: #1d1f20;
border-radius: var(--border-width);
}
.gradient-border::after {
content: "";
position: absolute;
top: calc(-1 * var(--border-width));
left: calc(-1 * var(--border-width));
width: calc(100% + var(--border-width) * 2);
height: calc(100% + var(--border-width) * 2);
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
background-size: 300% 300%;
border-radius: calc(2 * var(--border-width));
z-index: -1;
animation: animatedgradient 3s ease alternate infinite;
}
@keyframes animatedgradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}原理是這樣：
--border-width：CSS 變數，邊框粗細只要改這裡一個地方。::after：在方塊後面多畫一塊，上下左右各比方塊大 3px（往左上推 3px，寬高各加兩倍）。z-index: -1：把這塊漸層放到方塊後面。方塊本身的深灰色背景蓋住中間，只露出外圍一圈，看起來就像邊框。background-size: 300% 300%：把漸層放大成三倍，每次只露出其中一段。@keyframes移動background-position：放大的漸層左右來回移動，顏色就流動起來了。
原文還指定了 Raleway 字型，那要另外載入字型檔才會生效，這裡先拿掉。
這個寫法的缺點：彩色邊框可能「消失」
z-index: -1 會讓漸層排到很後面的圖層。如果方塊放在一個有背景色的外層區塊裡（WordPress 主題、頁面編輯器的區段常常有背景色），漸層會被外層的背景蓋住，邊框就不見了。
解法是在外層容器加上 isolation: isolate，讓漸層只在這個容器裡面往後排：
.section {
isolation: isolate; /* .section 換成方塊外層容器的 class */
}寫法二：雙層背景（推薦）
更簡單、也不會有圖層問題的做法，是讓元素本身有一條透明的邊框，再疊兩層背景：
- 第一層：深灰色，只鋪到內容區（
padding-box） - 第二層：彩色漸層，鋪到邊框區（
border-box）
透明邊框底下露出來的，就是第二層的彩色漸層。
HTML 只要一層：
<div class="flow-border">CSS 範例</div>CSS：
.flow-border {
--border-width: 3px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 400px;
min-height: 200px;
color: #fff;
font-size: 2.5rem;
border: var(--border-width) solid transparent;
border-radius: 8px;
background:
linear-gradient(#1d1f20, #1d1f20) padding-box,
linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82) border-box;
background-size: 100% 100%, 300% 300%;
animation: flow-border-move 3s ease infinite;
}
@keyframes flow-border-move {
0% { background-position: 0 0, 0% 50%; }
50% { background-position: 0 0, 100% 50%; }
100% { background-position: 0 0, 0% 50%; }
}比起寫法一的好處：
- 圓角直接用
border-radius，內外圈會自動對齊，不用另外計算。 - 不需要
position、z-index，放在任何背景上都不會消失。 - 寬度改成
max-width，手機上會自動縮小，不會超出畫面。
background-size 和 background-position 都寫了兩組值，逗號前面是第一層（深灰色），後面是第二層（彩色漸層），只有第二層在移動。
常見的調整
換顏色
改第二個 linear-gradient() 裡的色碼就好，顏色數量不限。想讓顏色頭尾接得比較順，最後一個顏色可以跟第一個一樣。
改速度、粗細
- 速度：
3s改大變慢、改小變快。 - 粗細：改
--border-width的數值。
滑鼠移過去才動（適合按鈕）
平常停住，滑鼠移過去或用鍵盤選到時才開始流動：
.flow-border {
animation-play-state: paused;
}
.flow-border:hover,
.flow-border:focus-visible {
animation-play-state: running;
}加上 :focus-visible，用鍵盤 Tab 切換到按鈕的人也看得到效果。
讓不喜歡動畫的人看到靜態版本
有些人在作業系統裡開了「減少動態效果」，一直在動的畫面會讓他們不舒服。加上這段，他們看到的就是靜止的漸層邊框：
@media (prefers-reduced-motion: reduce) {
.flow-border {
animation: none;
}
}使用時要注意
- 一頁用一兩個就好：會動的邊框是用來吸引目光的，到處都是反而分不出重點。
- 效能：移動
background-position的動畫，瀏覽器每一格畫面都要重新繪製。放一兩個沒問題，整頁很多個的話，比較舊的手機可能會變卡。 - 文字對比：邊框再漂亮，裡面的文字也要跟背景有足夠的對比才看得清楚。
想要繞著四邊轉圈的邊框？
這篇的顏色是「左右來回流動」。如果想要顏色沿著四邊繞圈，可以用 SVG 當 border-image，或用 conic-gradient 搭配 @property 做旋轉，做法請看CSS 做會動的漸層邊框：用 SVG 當 border-image 的教學。
延伸閱讀
- CSS 做會動的漸層邊框：用 SVG 當 border-image 的教學（附程式碼）
- CSS 彩色條紋怎麼做？用 linear-gradient 做多色分段色條（附顏色寫法整理）
- 好用的 CSS 語法技巧：半透明、圓角、陰影、字型等 15 個常用寫法
按鈕、活動區塊這類小地方做得細緻，網站整體的質感就會跟著提升。正威網路行銷是 25 年經驗的基隆網頁設計工作室，提供客製化網頁設計與 RWD 響應式網站，歡迎來聊聊。
發表留言
還沒有人留言，歡迎第一個分享你的想法或問題。留言經審核後才會顯示，Email 不會公開。