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)

1. Utilisez 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 的方法。

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=&#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: '';
  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-imageCSS fournit border-image

est utilisé pour dessiner des motifs complexes pour les bordures, et background-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.

2. Utilisez background-imageUtiliser background-image pour dessiner un arrière-plan dégradé et couvrir le milieu avec une couleur unie devrait être la chose la plus simple à faire. Pensez à cette méthode, l'idée est la suivante : utilisez deux cases pour se chevaucher, définissez un arrière-plan dégradé et un remplissage pour la case inférieure, et définissez un arrière-plan de couleur unie pour la case supérieure.

🎜HTML:🎜🎜

.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!