利用CSS怎麼創造漸層色邊框?以下這篇文章跟大家分享CSS實現漸變色邊框的5種方法,希望對大家有幫助!
給 border 設定漸變色是很常見的效果,實現這個效果有很多思路,今天把我所知道的方法羅列於此供大家參考。 (學習影片分享:css影片教學、web前端)
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
的方法。
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,且不準確。
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
我們可以使用偽元素取代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
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
目前就能想到這5種方法,個人推薦優先使用4和5,如果有其他更好的方法,歡迎大家補充。
更多程式相關知識,請造訪:程式設計入門! !
以上是利用CSS怎麼創造漸層色邊框? 5種方法分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!