首頁  >  文章  >  web前端  >  利用CSS怎麼創造漸層色邊框? 5種方法分享

利用CSS怎麼創造漸層色邊框? 5種方法分享

青灯夜游
青灯夜游轉載
2021-10-13 10:19:5710055瀏覽

利用CSS怎麼創造漸層色邊框?以下這篇文章跟大家分享CSS實現漸變色邊框的5種方法,希望對大家有幫助!

利用CSS怎麼創造漸層色邊框? 5種方法分享

給 border 設定漸變色是很常見的效果,實現這個效果有很多思路,今天把我所知道的方法羅列於此供大家參考。 (學習影片分享:css影片教學web前端

#1. 使用border-image

CSS 提供了border-image 屬性用於給border 繪製複雜圖樣,與background-image 類似,我們可以在border 中展示imagelinear- 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-imagebackground-clip

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

HTML:

<div class="border-box">
  <div class=&#39;border-bg&#39;></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: &#39;&#39;;
  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-clipbackground-originbackground- image

最後是我覺得最優雅的一種方法,只需要用到單層元素,為其分別設定background-clipbackground-originbackground-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

目前就能想到這5種方法,個人推薦優先使用4和5,如果有其他更好的方法,歡迎大家補充。

更多程式相關知識,請造訪:程式設計入門! !

以上是利用CSS怎麼創造漸層色邊框? 5種方法分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除