CSS 漸層色邊框
漸層色邊框除了使用「影像邊框」的做法,也可以透過虛擬元素定位和 background-clip 裁切背景這兩種方式,產生「漸層色邊框」的有趣效果,這篇教學會介紹這兩種製作漸層色邊框的方法。
快速導覽:
使用虛擬元素定位製作漸層色邊框
有別於「影像邊框」可以直接改變邊框樣式,padding
外邊界的做法需要額外使用一個虛擬元素作為漸層色背景,運用定位和尺寸的差異,就能產生漸層邊框的效果,下方範例額外使用 CSS 變數取代寬度、圓角半徑等需要修改的數值,產生三種不同粗細和顏色的邊框 ( 注意,這種做法會讓元素的寬度額外多出兩倍邊框寬度 )。
<!-- HTML 程式碼 -->
<div class="d">apple</div>
<div class="d d1">banana</div>
<div class="d d2">oxxo</div>
<!-- CSS 程式碼 -->
<style>
.d {
--r: 5px; /* 圓角半徑 */
--bw: 5px; /* 邊框粗細 */
position: relative;
width: 100px;
height: 100px;
margin: 20px;
padding: 5px;
background: #fff;
box-sizing: border-box; /* 避免 padding 影響寬度 */
border-radius: var(--r); /* 邊框圓角 */
}
.d::before {
position: absolute;
content: "";
z-index: -1;
top: calc(var(--bw) * -1); /* 往上偏移一個邊框寬 */
left: calc(var(--bw) * -1); /* 往左偏移一個邊框寬 */
width: calc(100% + 2 * var(--bw)); /* 寬度增加兩個邊框寬 */
height: calc(100% + 2 * var(--bw)); /* 高度增加兩個邊框寬 */
background: linear-gradient(#f00, #00f);
border-radius: var(--r); /* 邊框圓角 */
}
.d1{
--r: 10px;
--bw: 10px;
width: 150px;
margin: 30px 25px;
}
.d1::before {
background: linear-gradient(#f00, #fc0, #0c0, #09c, #00c);
}
.d2{
--r: 20px;
--bw: 20px;
width: 200px;
margin: 50px 35px;
}
.d2::before {
background:conic-gradient(
#500 0, #500 45deg,
#f00 45deg, #f00 90deg,
#f50 90deg, #f50 135deg,
#ff0 135deg,#ff0 180deg,
#0c0 180deg, #0c0 225deg,
#09d 225deg, #09d 270deg,
#00b 270deg, #00b 315deg,
#909 315deg, #909 360deg
);
}
</style>
使用 background-clip 製作漸層色邊框
雖然使用定位的方式可以製作漸層邊框,但卻無法改變邊框樣式,因此可以額外使用 background-clip
進行背景裁切,將正常邊框的寬度納入裁切範圍中,就可以修改原本邊框樣式,產生更多不同的邊框變化 ( 注意,雖然這個做法的寬度不會變寬,但如果要設定虛線的邊框樣式,則需要將內容背景色與後方背景色設為一致 )。
<!-- HTML 程式碼 -->
<div class="d">apple</div>
<div class="d d1">banana</div>
<div class="d d2">oxxo</div>
<!-- CSS 程式碼 -->
<style>
.d {
--r: 5px; /* 圓角半徑 */
--bw: 5px; /* 邊框粗細 */
position: relative;
width: 100px;
height: 100px;
margin: 10px;
background: #fff;
padding: 5px;
box-sizing: border-box; /* 避免 padding 影響寬度 */
border: var(--bw) solid #0000; /* 原本邊框顏色設為透明 */
background-clip: padding-box; /* 背景裁切設定 */
border-radius: calc(var(--r) + var(--bw)); /* 邊框圓角 */
}
.d::before {
position: absolute;
content: "";
z-index: -1;
top: calc(var(--bw) * -1); /* 往上偏移一個邊框寬 */
left: calc(var(--bw) * -1); /* 往左偏移一個邊框寬 */
width: calc(100% + 2 * var(--bw)); /* 寬度增加兩個邊框寬 */
height: calc(100% + 2 * var(--bw)); /* 高度增加兩個邊框寬 */
border-radius: calc(var(--r) + var(--bw));
background: linear-gradient(#f00, #00f);
}
.d1 {
--r: 10px;
--bw: 10px;
width: 150px;
border: calc(var(--bw) + 1px) dashed #fff;
}
.d1::before {
background: linear-gradient(#f00, #fc0, #0c0, #09c, #00c);
}
.d2 {
--r: 15px;
--bw: 15px;
width: 200px;
}
.d2::before {
background:conic-gradient(
#500 0, #500 45deg,
#f00 45deg, #f00 90deg,
#f50 90deg, #f50 135deg,
#ff0 135deg,#ff0 180deg,
#0c0 180deg, #0c0 225deg,
#09d 225deg, #09d 270deg,
#00b 270deg, #00b 315deg,
#909 315deg, #909 360deg
);
}
</style>
小結
漸層色邊框的效果其實並不難做,但整體實用性並不高,通常會應用在凸顯重點文字,如果網站有類似需求,不妨可以套用這個效果。
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~