利用CSS如何創建漸變色邊框

這篇文章將為大家詳細講解有關利用CSS如何創建漸變色邊框，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

給 border 設置漸變色是很常見的效果，實現這個效果有很多思路，今天把我所知道的方法羅列于此供大家參考。（學習視頻分享：css視頻教程）

1. 使用 border-image

CSS 提供了 border-image 屬性用于給 border 繪制復雜圖樣，與 background-image 類似，我們可以在 border 中展示image和linear-gradient。

通過 border-image 設置漸變色 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;
}

Codepen demo

https://codepen.io/mudontire/pen/xxLxeZw

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

2. 使用 background-image

使用 background-image 繪制漸變色背景，并且把中間用純色遮住應該是最容易想到的一種方法，思路是：使用兩個盒子疊加，給下層的盒子設置漸變色背景和 padding，給上層盒子設置純色背景。

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*/
}

Codepen demo

https://codepen.io/mudontire/pen/ZEJEZoY

這種方式的優點是容易理解，兼容性好，缺點是設置 content 的 border-radius 會比較 tricky，且不準確。

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

為了解決方法 2 中 border-radius 不準確的問題，可以使用一個單獨的元素作為漸變色背景放在最下層，上層設置一個透明的 border 和純色的背景（需要設置 background-clip: padding-box 以避免蓋住下層元素的 border）, 上下兩層設置相同的 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);
}

Codepen demo

https://codepen.io/mudontire/pen/yLoLrxL

4. 偽元素、方法3的簡化

我們可以使用偽元素替換 div.border-bg 以簡化HTML結構。

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

Codepen demo

https://codepen.io/mudontire/pen/JjyjVwN

5. 單層元素、background-clip、background-origin、background-image

最后是我覺得最優雅的一種方法，只需要用到單層元素，為其分別設置 background-clip、background-origin、background-image 這三個屬性，每個屬性設置兩組值，第一組用于設置border內的單色背景，第二組用于設置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);
}

Codepen demo

https://codepen.io/mudontire/pen/wvqvZZO

關于“利用CSS如何創建漸變色邊框”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。