web-dev-qa-db-fra.com

Frontières dégradées

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

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

Mais ça ne marche pas.

Est-ce que quelqu'un sait quelle est la bonne façon de faire des gradients de frontière?

csscss3gradient
238
Mark

WebKit maintenant (et au moins Chrome 12) supporte 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/
Support du navigateur: http://caniuse.com/#search=border-image

172
Tony

au lieu des bordures, j'utiliserais des dégradés et du remplissage de fond. même look, mais beaucoup plus facile, plus supporté.

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 aussi utiliser le sélecteur :before 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>

101
szajmon

Actuellement, Mozilla ne prend 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 abrégé.

- 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

47
Quentin

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

Ceci (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 c’est autour de l’élément entier, quatre minuscules gradients apparaissent dans chaque coin.

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

Essayez ceci, fonctionne bien sur le kit web

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

24
GibboK

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 le fond avec une zone d'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

10
Nate Smith

Je suis d'accord avec szajmon. Le seul problème avec ses réponses et celles de Quentin est la compatibilité entre 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
Scotty

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

Il existe également quelques 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 souhaitiez 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. Listez 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) no-repeat, 
 ...; 
}

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

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

2
Daniel Trebbien

Webkit prend en charge les dégradés dans les bordures et accepte désormais le dégradé au format Mozilla.

Firefox prétend prendre en charge les dégradés de deux manières:

  1. Utilisation de border-image avec border-image-source
  2. Utilisation des couleurs de bordure droite (droite/gauche/haut/bas)

IE9 n'a pas de support.

2
SamGoody

Gradient Borders from 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; 
}
2
VVS

Pour une prise en charge inter-navigateurs, vous pouvez également essayer d’imiter une bordure de dégradé avec les pseudo-éléments :before ou :after, en fonction de ce que vous souhaitez faire.

1
Denees

Exemple pour Bordure de dégradé

Utilisation de la propriété css border-image

Crédits à: border-image in 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>
1
Magaesh

Essayez ceci, cela a fonctionné pour moi.

.yourDivClass {
    border: 1px solid transparent;
    border-image: linear-gradient(to top, #3a4ed5 0%, #f2f2f2 100%);
    border-image-slice: 1;
}

Le lien est vers le violon https://jsfiddle.net/yash009/kayjqve3/1/ espérons que cela aide

1
Yash009

Voici une façon sympa, semi-multi-navigateur, d'avoir des bordures de dégradé qui s'estompent à mi-chemin. En réglant simplement color-stop sur rgba(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

0
Yes Barry

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
x'tian