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:
BEARBEITEN: Sie können den
:before
Selektor auch nutzen, wie @WalterSchwarz hervorhob:quelle
border-image-slice
erweitert einen CSS-RahmenbildverlaufDies 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.
quelle
border-radius
, wird der Rahmenradius ignoriert :(- https://developer.mozilla.org/en/CSS/-moz-linear-gradient
- http://www.cssportal.com/css3-preview/borders.htm
quelle
Versuchen Sie dies, funktioniert gut auf Web-Kit
quelle
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:
Von: http://blog.nateps.com/the-elusive-css-border-gradient
quelle
Versuchen Sie das, es hat bei mir funktioniert.
Der Link führt zur Geige https://jsfiddle.net/yash009/kayjqve3/1/ Ich hoffe, das hilft
quelle
Ich stimme Szajmon zu. Das einzige Problem mit seinen und Quentins Antworten ist die browserübergreifende Kompatibilität.
HTML:
CSS:
quelle
filter
, um IE für solche Kleinigkeiten zu unterstützen, verwenden Sie einfach einen festen Rand.!important
. Nun, Alohci, du bist dran und erklärst auch warum :)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:
IE9 hat keine Unterstützung.
quelle
Versuchen Sie das folgende Beispiel:
quelle
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:
Sie können diese Technik an Farbverläufe am oberen, rechten und unteren Rand anpassen, indem Sie den Hintergrundpositionsteil der
background
Kurzschrift-Eigenschaft ändern .Hier ist eine jsFiddle für das angegebene Beispiel: http://jsfiddle.net/jLnDt/
quelle
Farbverlaufsgrenzen von CSS-Tricks: http://css-tricks.com/examples/GradientBorder/
quelle
Für die browserübergreifende Unterstützung können Sie auch versuchen, einen Verlaufsrand mit
:before
oder:after
Pseudoelementen zu imitieren , je nachdem, was Sie tun möchten.quelle
Beispiel für Gradientenrand
Verwenden der CSS-Eigenschaft border-image
Credits an: Rahmenbild in Mozilla
quelle
Versuchen Sie diesen Code
oder beziehen Sie sich vielleicht auf diese Geige: http://jsfiddle.net/necolas/vqnk9/
quelle
Hier ist eine nette halbbrowserübergreifende Methode, um Verlaufsränder zu erhalten, die auf halber Höhe ausgeblendet werden. Einfach durch Einstellen des Farbstopps auf
rgba(0, 0, 0, 0)
Verwendung erklärt:
Mehr hier: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
quelle
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.
Die schönen Dinge an diesem Ansatz sind:
Probieren Sie es aus: https://codepen.io/AlexOverbeck/pen/axGQyv?editors=1100
quelle