Verlaufsgrenzen

274

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?

Kennzeichen
quelle

Antworten:

191

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

Tony
quelle
21
Dieser Link erwähnt das
Randbild
4
Funktioniert in keinem Browser bei Verwendung des Rahmenradius! Anscheinend erzeugt die Rahmenbild-Eigenschaft immer quadratische Ränder, selbst wenn der Randradius aktiviert ist. Die Alternative mit verschachtelten Elementen (oder einem: Vorher-Element) ist daher die flexibelste Lösung. Hier ist eine JSFiddle, die zeigt, wie dies am einfachsten geht: jsfiddle.net/wschwarz/e2ckdp2v
Walter Schwarz
112

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>

szajmon
quelle
3
Die Verwendung eines: before-Elements ist besser, da Sie dann die volle Kontrolle über CSS haben und das HTML-Markup sauber bleibt. Hier ist eine JSFiddle, die zeigt, wie dies am einfachsten geht: jsfiddle.net/wschwarz/e2ckdp2v
Walter Schwarz
Bitte beachten Sie, dass "viel mehr unterstützt" die Unterstützung von IE10 bedeuten würde. Siehe CanIUse border-image vs CanIUse Gradient .
August
56

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;
Dave Everitt
quelle
8
Wenn dies in Chrome kombiniert wird border-radius, wird der Rahmenradius ignoriert :(
Ben
49

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

QUentin
quelle
27

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>

GibboK
quelle
1
Warum sind die Oberseiten und Unterseiten einfarbig?
John Ktejik
11

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

Nate Smith
quelle
4

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

Yash009
quelle
3

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; }
Scotty
quelle
3
Bitte, nein filter, um IE für solche Kleinigkeiten zu unterstützen, verwenden Sie einfach einen festen Rand.
Ricardo Zea
@ Ricardo - willst du erklären warum?
Alohci
@Alohci, klar, viele Gründe. Beachten Sie, dass meine Erklärung nicht für Sie ist, da jemand mit Ihrem Ruf diese Dinge bereits kennt, sondern für andere, die sie entweder nicht kennen und / oder lernen: 1. Es ist klüger, Graceful Degradation zu verwenden . 2. Wir als Webdesigner / Entwickler sollten darüber nachdenken, Websites für die Benutzer und nicht für die Browser zu erstellen. Und nur um es an 3 Punkten zu belassen, 3. Nur weil Sie es können, heißt das nicht, dass Sie es tun sollten. Gleich wie beim Inline-Styling und dem Unvermeidlichen !important. Nun, Alohci, du bist dran und erklärst auch warum :)
Ricardo Zea
Und dann dieser Kommentar und diese eine Summe alles auf. Ich bin mir sicher, dass es dort noch viel mehr gibt.
Ricardo Zea
3

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;
}
Vijay Chauhan
quelle
2

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/

Daniel Trebbien
quelle
2

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; 
}
VVS
quelle
1

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.

Denees
quelle
1

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>

Magaesh
quelle
0

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/

x'tian
quelle
0

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

Ja, Barry
quelle
-2

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

Alex
quelle