Réponses:
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
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 :before
utiliser 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>
border-image-slice
étendra un dégradé d'image de bordure CSSCela (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;
border-radius
, le border-radius est ignoré :(
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;
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>
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 */
}
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
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; }
filter
pour prendre en charge IE pour une chose aussi mineure, utilisez simplement une bordure solide.
!important
. Maintenant, Alohci, à ton tour d'expliquer pourquoi aussi
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:
IE9 ne prend pas en charge.
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;
}
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 background
propriété de raccourci.
Voici un jsFiddle pour l'exemple donné: http://jsfiddle.net/jLnDt/
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;
}
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>
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/
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
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:
Découvrez-le: https://codepen.io/AlexOverbeck/pen/axGQyv?editors=1100