Ich versuche, einen Farbverlauf auf einen Rand anzuwenden. Ich dachte, das ist so einfach:

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

Das geht aber nicht.

Weiß jemand, wie man Grenzverläufe richtig macht?

WebKit unterstützt jetzt (und zumindest Chrome 12) Farbverläufe als Rahmenbild:

-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/ Browserunterstützung
: http://caniuse.com/#search=border-image

Anstelle von Rändern würde ich Hintergrundverläufe und Auffüllungen verwenden. gleiches Aussehen, aber viel einfacher, mehr unterstützt.

ein einfaches Beispiel:

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

BEARBEITEN: Sie können den :beforeSelektor auch nutzen, wie @WalterSchwarz hervorhob:

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 erweitert einen CSS-Rahmenbildverlauf

Dies verhindert (so wie ich es verstehe) das standardmäßige Aufteilen des "Bildes" in Abschnitte - ohne es wird nichts angezeigt, wenn sich der Rand nur auf einer Seite befindet und wenn er sich um das gesamte Element befindet, erscheinen vier winzige Farbverläufe in jeder Ecke.

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

Mozilla unterstützt derzeit nur CSS-Verläufe als Werte der Hintergrundbildeigenschaft sowie innerhalb des Kurzhintergrunds.

- 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

Versuchen Sie dies, funktioniert gut auf 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>

Es ist ein Hack, aber Sie können diesen Effekt in einigen Fällen erzielen, indem Sie das Hintergrundbild verwenden, um den Farbverlauf festzulegen, und dann den tatsächlichen Hintergrund mit einem Kastenschatten maskieren. Beispielsweise:

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 */
}

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

Versuchen Sie das, es hat bei mir funktioniert.

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>

Der Link führt zur Geige https://jsfiddle.net/yash009/kayjqve3/1/ Ich hoffe, das hilft

Ich stimme Szajmon zu. Das einzige Problem mit seinen und Quentins Antworten ist die browserübergreifende Kompatibilität.

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; }

Webkit unterstützt Farbverläufe in Rahmen und akzeptiert jetzt den Farbverlauf im Mozilla-Format.

Firefox behauptet, Farbverläufe auf zwei Arten zu unterstützen:

1. Verwenden von Rahmenbildern mit Rahmenbildquellen
2. Verwenden von Rand-Rechts-Farben (rechts / links / oben / unten)

IE9 hat keine Unterstützung.

Versuchen Sie das folgende Beispiel:

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

Ein weiterer Hack, um den gleichen Effekt zu erzielen, ist die Verwendung mehrerer Hintergrundbilder, eine Funktion, die in IE9 +, neuem Firefox und den meisten WebKit-basierten Browsern unterstützt wird: http://caniuse.com/#feat=multibackgrounds

Es gibt auch einige Optionen für die Verwendung mehrerer Hintergründe in IE6-8: http://www.beyondhyper.com/css3-multiple-backgrounds-in-non-supportive-browsers/

Angenommen, Sie möchten einen 5 Pixel breiten linken Rand, der ein linearer Farbverlauf von Blau nach Weiß ist. Erstellen Sie den Verlauf als Bild und exportieren Sie ihn in ein PNG. Listen Sie alle anderen CSS-Hintergründe nach dem für den linken Randverlauf auf:

#die Kiste {
    Hintergrund:
        URL (/images/theBox-leftBorderGradient.png) ließ keine Wiederholung,
        ...;
}}

Sie können diese Technik an Farbverläufe am oberen, rechten und unteren Rand anpassen, indem Sie den Hintergrundpositionsteil der backgroundKurzschrift-Eigenschaft ändern .

Hier ist eine jsFiddle für das angegebene Beispiel: http://jsfiddle.net/jLnDt/

Farbverlaufsgrenzen von 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; 
}

Für die browserübergreifende Unterstützung können Sie auch versuchen, einen Verlaufsrand mit :beforeoder :afterPseudoelementen zu imitieren , je nachdem, was Sie tun möchten.

Beispiel für Gradientenrand

Verwenden der CSS-Eigenschaft border-image

Credits an: Rahmenbild 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>

Versuchen Sie diesen 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%); 
}

oder beziehen Sie sich vielleicht auf diese Geige: http://jsfiddle.net/necolas/vqnk9/

Hier ist eine nette halbbrowserübergreifende Methode, um Verlaufsränder zu erhalten, die auf halber Höhe ausgeblendet werden. Einfach durch Einstellen des Farbstopps aufrgba(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>

Verwendung erklärt:

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

Mehr hier: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Hier gibt es einen schönen Artikel über CSS-Tricks: https://css-tricks.com/gradient-borders-in-css/

Ich konnte eine ziemlich einfache Lösung für ein einzelnes Element finden, indem ich mehrere Hintergründe und die Eigenschaft background-origin verwendete.

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

Die schönen Dinge an diesem Ansatz sind:

1. Es ist nicht vom Z-Index betroffen
2. Es kann einfach skaliert werden, indem nur die Breite des transparenten Rahmens geändert wird

Probieren Sie es aus: https://codepen.io/AlexOverbeck/pen/axGQyv?editors=1100