Bordures dégradées


274

J'essaie d'appliquer un dégradé à une bordure, je pensais que c'était aussi simple que de faire ceci:

border-color: -moz-linear-gradient(top, #555555, #111111);

Mais cela ne fonctionne pas.

Quelqu'un sait-il quelle est la bonne façon de faire des dégradés de bordure?

Réponses:


191

WebKit maintenant (et Chrome 12 au moins) prend en charge les dégradés comme image de bordure:

-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;

Prooflink - http://www.webkit.org/blog/1424/css3-gradients/
Prise en charge du navigateur: http://caniuse.com/#search=border-image


21
Ce lien ne mentionne pas du tout frontière-image ...: /
aaaidan

4
Ne fonctionne dans aucun navigateur lors de l'utilisation de border-radius! Apparemment, la propriété border-image crée toujours des bordures carrées même si border-radius est activé. Ainsi, l'alternative avec des éléments imbriqués (ou un élément: before) est la solution la plus flexible. Voici un JSFiddle qui montre la manière la plus simple de le faire: jsfiddle.net/wschwarz/e2ckdp2v
Walter Schwarz

112

au lieu de bordures, j'utiliserais des dégradés d'arrière-plan et un rembourrage. même look, mais beaucoup plus facile, plus pris en charge.

un exemple simple:

.g {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14,173,173)), color-stop(0.67, rgb(0,255,255)));
background-image: -moz-linear-gradient(center bottom, rgb(14,173,173) 33%, rgb(0,255,255) 67% );
padding: 2px;
}

.g > div { background: #fff; }
<div class="g">
	<div>bla</div>
</div>


EDIT: Vous pouvez également :beforeutiliser le sélecteur comme l'a souligné @WalterSchwarz:

body {
    padding: 20px;
}
.circle {
    width: 100%;
    height: 200px;
    background: linear-gradient(to top, #3acfd5 0%, #3a4ed5 100%);
    border-radius: 100%;
    position: relative;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}
.circle::before {
    border-radius: 100%;
    content: '';
    background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
    padding: 10px;
    width: 100%;
    height:100%;
    top: -10px;
    left: -10px;
    position:absolute;
    z-index:-1;
}
<div class="circle">Test</div>


3
Il est préférable d'utiliser un élément: before, car vous disposez alors d'un contrôle total via CSS et le balisage HTML reste propre. Voici un JSFiddle qui montre la manière la plus simple de le faire: jsfiddle.net/wschwarz/e2ckdp2v
Walter Schwarz

Veuillez noter que «beaucoup plus pris en charge» signifierait inclure la prise en charge d'IE10. Voir CanIUse border-image vs CanIUse Gradient .
août

56

border-image-slice étendra un dégradé d'image de bordure CSS

Cela (si je comprends bien) empêche le découpage par défaut de "l'image" en sections - sans cela, rien n'apparaît si la bordure n'est que d'un côté, et si elle est autour de l'élément entier, quatre minuscules dégradés apparaissent dans chaque coin.

  border-bottom: 6px solid transparent;
  border-image: linear-gradient(to right, red , yellow);
  border-image-slice: 1;

8
Dans Chrome, si cela est combiné avec border-radius, le border-radius est ignoré :(
Ben

49

Mozilla ne prend actuellement en charge que les dégradés CSS en tant que valeurs de la propriété background-image, ainsi que dans l'arrière-plan raccourci.

- https://developer.mozilla.org/en/CSS/-moz-linear-gradient

Example 3 - Gradient Borders

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px; 

- http://www.cssportal.com/css3-preview/borders.htm


27

Essayez ceci, fonctionne très bien sur le web-kit

.border { 
    width: 400px;
    padding: 20px;
    border-top: 10px solid #FFFF00;
    border-bottom:10px solid #FF0000;
    background-image: 
        linear-gradient(#FFFF00, #FF0000),
        linear-gradient(#FFFF00, #FF0000)
    ;
    background-size:10px 100%;
    background-position:0 0, 100% 0;
    background-repeat:no-repeat;
}
<div class="border">Hello!</div>


1
pourquoi les hauts et les bas sont-ils de couleurs unies?
John Ktejik

11

C'est un hack, mais vous pouvez obtenir cet effet dans certains cas en utilisant l'image d'arrière-plan pour spécifier le dégradé, puis en masquant l'arrière-plan réel avec une boîte-ombre. Par exemple:

p {
  display: inline-block;
  width: 50px;
  height: 50px;
  /* The background is used to specify the border background */
  background: -moz-linear-gradient(45deg, #f00, #ff0);
  background: -webkit-linear-gradient(45deg, #f00, #ff0);
  /* Background origin is the padding box by default.
  Override to make the background cover the border as well. */
  -moz-background-origin: border;
  background-origin: border-box;
  /* A transparent border determines the width */
  border: 4px solid transparent;
  border-radius: 8px;
  box-shadow:
    inset 0 0 12px #0cc, /* Inset shadow */
    0 0 12px #0cc, /* Outset shadow */
    inset -999px 0 0 #fff; /* The background color */
}

De: http://blog.nateps.com/the-elusive-css-border-gradient


4

Essayez ça, ça a marché pour moi.

div{
  border-radius: 20px;
  height: 70vh;
  overflow: hidden;
}

div::before{
  content: '';
  display: block;
  box-sizing: border-box;
  height: 100%;

  border: 1em solid transparent;
  border-image: linear-gradient(to top, red 0%, blue 100%);
  border-image-slice: 1;
}
<div></div>

Le lien est vers le violon https://jsfiddle.net/yash009/kayjqve3/1/ j'espère que cela aide


3

Je suis d'accord avec szajmon. Le seul problème avec ses réponses et celles de Quentin est la compatibilité entre les navigateurs.

HTML:

<div class="g">
    <div>bla</div>
</div>

CSS:

.g {
background-image: -webkit-linear-gradient(300deg, white, black, white); /* webkit browsers (Chrome & Safari) */
background-image: -moz-linear-gradient(300deg, white, black, white); /* Mozilla browsers (Firefox) */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', gradientType='1'); /* Internet Explorer */
background-image: -o-linear-gradient(300deg,rgb(255,255,255),rgb(0,0,0) 50%,rgb(255,255,255) 100%); /* Opera */
}

.g > div { background: #fff; }

3
S'il vous plaît, non filterpour prendre en charge IE pour une chose aussi mineure, utilisez simplement une bordure solide.
Ricardo Zea

@Ricardo - voulez-vous expliquer pourquoi?
Alohci

@Alohci, bien sûr, beaucoup de raisons. Notez que mon explication n'est pas pour vous car quelqu'un avec votre réputation sait déjà ces choses, c'est pour d'autres qui ne le savent pas et / ou qui apprennent: 1. Il est plus intelligent d'utiliser la Dégradation Gracieuse . 2. En tant que concepteurs / développeurs Web, nous devrions penser à créer des sites Web pour les utilisateurs, pas pour les navigateurs. Et juste le laisser à 3 points, 3. Ce n'est pas parce que vous «pouvez» le faire que vous «devriez» le faire. Identique au style en ligne et à l'inévitable !important. Maintenant, Alohci, à ton tour d'expliquer pourquoi aussi
Ricardo Zea

Et puis ce commentaire et celui-ci résument le tout. Je suis sûr qu'il y en a plein d'autres.
Ricardo Zea


3

Essayez l'exemple ci-dessous:

.border-gradient {
      border-width: 5px 5px 5px 5px;
      border-image: linear-gradient(45deg, rgba(100,57,242,1) 0%, rgba(242,55,55,1) 100%);
      border-image-slice: 9;
      border-style: solid;
}

2

Un autre hack pour obtenir le même effet consiste à utiliser plusieurs images d'arrière-plan, une fonctionnalité prise en charge dans IE9 +, Firefox récent et la plupart des navigateurs WebKit: http://caniuse.com/#feat=multibackgrounds

Il existe également des options pour utiliser plusieurs arrière-plans dans IE6-8: http://www.beyondhyper.com/css3-multiple-backgrounds-in-non-supportive-browsers/

Par exemple, supposons que vous vouliez une bordure gauche de 5 pixels de large qui soit un dégradé linéaire du bleu au blanc. Créez le dégradé sous forme d'image et exportez-le au format PNG. Liste tous les autres arrière-plans CSS après celui du dégradé de bordure gauche:

#la boîte {
    Contexte:
        url (/images/theBox-leftBorderGradient.png) laissé sans répétition,
        ...;
}

Vous pouvez adapter cette technique aux dégradés de bordure supérieur, droit et inférieur en modifiant la partie position d'arrière-plan de la backgroundpropriété de raccourci.

Voici un jsFiddle pour l'exemple donné: http://jsfiddle.net/jLnDt/


2

Bordures de dégradé de Css-Tricks: http://css-tricks.com/examples/GradientBorder/

.multbg-top-to-bottom {
  border-top: 3px solid black;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(#000, transparent);
  background-image:
      -moz-linear-gradient(#000, transparent),
      -moz-linear-gradient(#000, transparent);
  background-image:
      -o-linear-gradient(#000, transparent),
      -o-linear-gradient(#000, transparent);
  background-image: 
      linear-gradient(#000, transparent),
      linear-gradient(#000, transparent);
  -moz-background-size: 3px 100%;
  background-size: 3px 100%;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat; 
}

1

Pour la prise en charge de plusieurs navigateurs, vous pouvez également essayer d'imiter une bordure dégradée avec :beforeou des :afterpseudo-éléments, selon ce que vous voulez faire.


1

Exemple de bordure dégradée

Utilisation de la propriété css de border-image

Crédits à: border-image dans Mozilla

.grad-border {
  height: 1px;
  width: 85%;
  margin: 0 auto;
  display: flex;
}
.left-border, .right-border {
  width: 50%;
  border-bottom: 2px solid #695f52;
  display: inline-block;
}
.left-border {
  border-image: linear-gradient(270deg, #b3b3b3, #fff) 1;
}
.right-border {
  border-image: linear-gradient(90deg, #b3b3b3, #fff) 1;
}
<div class="grad-border">
  <div class="left-border"></div>
  <div class="right-border"></div>
</div>


0

essayez ce code

.gradientBoxesWithOuterShadows { 
height: 200px;
width: 400px; 
padding: 20px;
background-color: white; 

/* outer shadows  (note the rgba is red, green, blue, alpha) */
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4); 
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);

/* rounded corners */
-webkit-border-radius: 12px;
-moz-border-radius: 7px; 
border-radius: 7px;

/* gradients */
background: -webkit-gradient(linear, left top, left bottom, 
color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5)); 
background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%); 
}

ou peut-être se référer à ce violon: http://jsfiddle.net/necolas/vqnk9/


0

Voici une belle façon semi-multi-navigateur d'avoir des bordures de dégradé qui disparaissent à mi-chemin. En réglant simplement la couleur-stop surrgba(0, 0, 0, 0)

.fade-out-borders {
min-height: 200px; /* for example */

-webkit-border-image: -webkit-gradient(linear, 0 0, 0 50%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
-moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
-o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0) 50%) 1 100%;
}

<div class="fade-out-border"></div>

Utilisation expliquée:

Formal grammar: linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
                              \---------------------------------/ \----------------------------/
                                Definition of the gradient line         List of color stops  

Plus ici: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient


-2

Il y a un bel article sur les astuces css à ce sujet ici: https://css-tricks.com/gradient-borders-in-css/

J'ai pu trouver une solution assez simple et unique à cela en utilisant plusieurs arrière-plans et la propriété background-origin.

.wrapper {
  background: linear-gradient(#222, #222), 
              linear-gradient(to right, red, purple);
  background-origin: padding-box, border-box;
  background-repeat: no-repeat; /* this is important */
  border: 5px solid transparent;
}

Les bonnes choses à propos de cette approche sont:

  1. Il n'est pas affecté par z-index
  2. Il peut évoluer facilement en changeant simplement la largeur de la bordure transparente

Découvrez-le: https://codepen.io/AlexOverbeck/pen/axGQyv?editors=1100

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.