您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)利用CSS如何創(chuàng)建漸變色邊框,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
給 border 設(shè)置漸變色是很常見的效果,實現(xiàn)這個效果有很多思路,今天把我所知道的方法羅列于此供大家參考。(學(xué)習(xí)視頻分享:css視頻教程)
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; }
Codepen demo
https://codepen.io/mudontire/pen/xxLxeZw
這種方式雖然簡單但有個明顯的缺陷,不支持設(shè)置 border-radius
。接下來會介紹幾種支持 border-radius
的方法。
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*/ }
Codepen demo
https://codepen.io/mudontire/pen/ZEJEZoY
這種方式的優(yōu)點是容易理解,兼容性好,缺點是設(shè)置 content 的 border-radius
會比較 tricky,且不準(zhǔn)確。
background-image
、background-clip
為了解決方法 2 中 border-radius
不準(zhǔn)確的問題,可以使用一個單獨的元素作為漸變色背景放在最下層,上層設(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); }
Codepen demo
https://codepen.io/mudontire/pen/yLoLrxL
我們可以使用偽元素替換 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); }
Codepen demo
https://codepen.io/mudontire/pen/JjyjVwN
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); }
Codepen demo
https://codepen.io/mudontire/pen/wvqvZZO
關(guān)于“利用CSS如何創(chuàng)建漸變色邊框”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。