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;}

這種方式雖然簡單但有個(gè)明顯的缺陷，不支持設(shè)置 border-radius。接下來會(huì)介紹幾種支持 border-radius 的方法。

2、使用 background-image

使用 background-image 繪制漸變色背景，并且把中間用純色遮住應(yīng)該是最容易想到的一種方法。

思路是：使用兩個(gè)盒子疊加，給下層的盒子設(shè)置漸變色背景和 padding，給上層盒子設(shè)置純色背景。

html:


<div>  <div>    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 會(huì)比較 tricky，且不準(zhǔn)確。

3、兩層元素、background-image、background-clip

為了解決方法 2 中 border-radius 不準(zhǔn)確的問題，可以使用一個(gè)單獨(dú)的元素作為漸變色背景放在最下層，上層設(shè)置一個(gè)透明的 border 和純色的背景（需要設(shè)置 background-clip: padding-box 以避免蓋住下層元素的 border）, 上下兩層設(shè)置相同的 border-radius。

html:


<div>  <div></div>  <div>    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>  <div>    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 這三個(gè)屬性，每個(gè)屬性設(shè)置兩組值，第一組用于設(shè)置border內(nèi)的單色背景，第二組用于設(shè)置border上的漸變色。

HTML:


<div>  <div>    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種方法，個(gè)人推薦優(yōu)先使用方法4和方法5。

最后，感謝您的閱讀，如果你覺得我分享的方法有用，請(qǐng)記得給我點(diǎn)個(gè)贊。