Maison > Article > interface Web > Comment créer une bordure dégradée en utilisant CSS ? 5 façons de partager
Comment créer une bordure dégradée en utilisant CSS ? L'article suivant partagera avec vous 5 façons d'implémenter des bordures dégradées avec CSS. J'espère qu'il vous sera utile !
Définir une couleur dégradée pour la bordure est un effet très courant. Il existe de nombreuses idées pour obtenir cet effet. Aujourd'hui, je liste les méthodes que je connais pour votre référence. (Partage de vidéos d'apprentissage : tutoriel vidéo CSS, front-end Web)
border-image
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
CSS fournit border-image
De même, nous pouvons afficher dans l'image de bordure
et le gradient linéaire
. Définir la bordure du dégradé via border-image
est la méthode la plus simple, qui ne nécessite que deux lignes de code :
CSS:
<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>
Démo Codepen
https://codepen. io /mudontire/pen/xxLxeZw
Bien que cette méthode soit simple, elle présente un défaut évident elle ne prend pas en charge le paramètre border-radius
. Ensuite, nous présenterons plusieurs méthodes pour prendre en charge border-radius
.
.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); }🎜🎜CSS:🎜🎜rrreee🎜🎜Démo Codepen🎜🎜https://codepen.io/mudontire/pen/ZEJEZoY🎜🎜🎜Les avantages de cette méthode sont qu'elle est facile à comprendre et a une bonne compatibilité. L'inconvénient est que la définition du
border-radius
du contenu est délicate et inexacte. 🎜🎜3. Éléments à deux couches, background-image
, background-clip
🎜Afin de résoudre le problème du border-radius code> dans la méthode 2 Pour la question exacte, vous pouvez utiliser un élément distinct comme arrière-plan dégradé et le placer sur le calque inférieur. Définissez une bordure transparente et un arrière-plan de couleur unie sur le calque supérieur (vous devez définir background-clip: padding. -box pour éviter de couvrir la bordure de l'élément inférieur), de haut en bas, définissez le même <code>border-radius
pour les deux calques. 🎜🎜🎜HTML:🎜🎜rrreee🎜🎜CSS:🎜🎜rrreee🎜🎜Démo Codepen🎜🎜https://codepen.io/mudontire/pen/yLoLrxL🎜🎜🎜4 Pseudo-éléments, simplification de la méthode 3h2 > 🎜Nous pouvons remplacer div.border-bg
par des pseudo éléments pour simplifier la structure HTML. 🎜🎜🎜HTML:🎜🎜rrreee🎜🎜CSS:🎜🎜rrreee🎜🎜Démo Codepen🎜🎜https://codepen.io/mudontire/pen/JjyjVwN🎜🎜🎜5 Élément monocouche, background-clip<.>, <code>background-origin
, background-image
🎜La dernière est la méthode la plus élégante que je pense, qui ne nécessite d'utiliser qu'un seul calque d'éléments. Il définit trois attributs : background-clip
, background-origin
et background-image
respectivement. Chaque attribut définit respectivement deux ensembles de valeurs. Le premier groupe One est utilisé pour définir l'arrière-plan monochrome à l'intérieur de la bordure et le deuxième groupe est utilisé pour définir la couleur dégradée sur la bordure. 🎜🎜🎜HTML:🎜🎜rrreee🎜🎜CSS:🎜🎜rrreee🎜🎜Démo Codepen🎜🎜https://codepen.io/mudontire/pen/wvqvZZO🎜🎜🎜Je peux penser à ces 5 méthodes maintenant, et je recommande personnellement en les utilisant d'abord 4 et 5, s'il existe d'autres méthodes meilleures, vous êtes invités à les ajouter. 🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Introduction à la programmation🎜 ! ! 🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!