CSS實(shí)現(xiàn)漸變色邊框(Gradient borders)的5種方法
我要評論給 border 設(shè)置漸變色是很常見的效果，實(shí)現(xiàn)這個效果有很多思路，今天把我所知道的方法羅列于此供大家參考。
1. 使用border-image
CSS 提供了 border-image 屬性用于給 border 繪制復(fù)雜圖樣，與 background-image 類似，我們可以在 border 中展示image和linear-gradient。
通過 border-image 設(shè)置漸變色 border 是最簡單的方法，只需要兩行代碼：
CSS:
div {
border: 4px solid;
border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
}
/* 或者 */
div {
border: 4px solid;
border-image-source: linear-gradient(to right, #8f41e9, #578aef);
border-image-slice: 1;
}
這種方式雖然簡單但有個明顯的缺陷，不支持設(shè)置 border-radius。接下來會介紹幾種支持 border-radius 的方法。
2. 使用 background-image
使用 background-image 繪制漸變色背景，并且把中間用純色遮住應(yīng)該是最容易想到的一種方法，思路是：使用兩個盒子疊加，給下層的盒子設(shè)置漸變色背景和 padding，給上層盒子設(shè)置純色背景。
HTML:
<div class="border-box border-bg">
<div class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione
necessitatibus numquam sunt nihil quos saepe sit facere. Alias accusamus
voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
accusamus tempora.
</div>
</div>
CSS:
.border-box {
width: 300px;
height: 200px;
margin: 25px 0;
}
.border-bg {
padding: 4px;
background: linear-gradient(to right, #8f41e9, #578aef);
border-radius: 16px;
}
.content {
height: 100%;
background: #222;
border-radius: 13px; /*trciky part*/
}
這種方式的優(yōu)點(diǎn)是容易理解，兼容性好，缺點(diǎn)是設(shè)置 content 的 border-radius 會比較 tricky，且不準(zhǔn)確。
3. 兩層元素、background-image、background-clip
為了解決方法 2 中 border-radius 不準(zhǔn)確的問題，可以使用一個單獨(dú)的元素作為漸變色背景放在最下層，上層設(shè)置一個透明的 border 和純色的背景（需要設(shè)置 background-clip: padding-box 以避免蓋住下層元素的 border）, 上下兩層設(shè)置相同的 border-radius。
HTML:
<div class="border-box">
<div class='border-bg'></div>
<div class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
accusamus tempora.
</div>
</div>
CSS:
.border-box {
border: 4px solid transparent;
border-radius: 16px;
position: relative;
background-color: #222;
background-clip: padding-box; /*important*/
}
.border-bg {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
margin: -4px;
border-radius: inherit; /*important*/
background: linear-gradient(to right, #8f41e9, #578aef);
}
4. 偽元素、方法3的簡化
我們可以使用偽元素替換 div.border-bg 以簡化HTML結(jié)構(gòu)。
HTML:
<div class="border-box">
<div class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
accusamus tempora.
</div>
</div>
CSS:
.border-box {
border: 4px solid transparent;
border-radius: 16px;
position: relative;
background-color: #222;
background-clip: padding-box; /*important*/
}
.border-box::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
margin: -4px;
border-radius: inherit; /*important*/
background: linear-gradient(to right, #8F41E9, #578AEF);
}
5. 單層元素、background-clip、background-origin、background-image
最后是我覺得最優(yōu)雅的一種方法，只需要用到單層元素，為其分別設(shè)置 background-clip、background-origin、background-image 這三個屬性，每個屬性設(shè)置兩組值，第一組用于設(shè)置border內(nèi)的單色背景，第二組用于設(shè)置border上的漸變色。
HTML:
<div class="border-box">
<div class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
accusamus tempora.
</div>
</div>
CSS:
.border-box {
border: 4px solid transparent;
border-radius: 16px;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #8F41E9, #578AEF);
}
目前就能想到這5種方法，個人推薦優(yōu)先使用4和5
到此這篇關(guān)于CSS實(shí)現(xiàn)漸變色邊框(Gradient borders)的5種方法的文章就介紹到這了,更多相關(guān)CSS 漸變色邊框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS動態(tài)漸變色邊框圍繞內(nèi)容區(qū)域旋轉(zhuǎn)的效果(實(shí)例代碼)
這篇文章主要介紹了CSS動態(tài)漸變色邊框圍繞內(nèi)容區(qū)域旋轉(zhuǎn)的效果,代碼簡單易懂非常不錯，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-11-18
