Verlauf-Grenzen
Ich versuche das anwenden eines Verlaufs auf eine Grenze, ich dachte, es war so einfach, wie dies zu tun:
border-color: -moz-linear-gradient(top, #555555, #111111);
Aber das funktioniert nicht.
Weiß jemand, was ist der richtige Weg, das zu tun, Grenze Verläufe?
Du musst angemeldet sein, um einen Kommentar abzugeben.
WebKit-jetzt (und Chrome 12 mindestens) unterstützt Verläufe als Grenze Bild:
Prooflink -- http://www.webkit.org/blog/1424/css3-gradients/
Browser-Unterstützung: http://caniuse.com/#search=border-image
statt Grenzen, ich würde mit hintergrund-Verläufe und Polsterung. gleiche Optik, ist aber viel einfacher, mehr unterstützt.
einem einfachen Beispiel:
CSS:
HTML:
BEARBEITEN: Sie können auch nutzen die
:before
Selektor als @WalterSchwarz hingewiesen:CSS:
HTML:
— https://developer.mozilla.org/en/CSS/-moz-linear-gradient
— http://www.cssportal.com/css3-preview/borders.htm
border-image-slice
verlängert einen CSS border-image-gradientDiese (wie ich es verstehe) verhindert, dass die Standard slicing von "Bild" in Abschnitte - ohne Sie, wird nichts angezeigt, wenn der Rand ist nur auf einer Seite, und wenn es um das gesamte element vier kleine Steigungen erscheinen in jeder Ecke.
border-radius
, der border-radius wird ignoriert 🙁Versuchen, diese, funktioniert gut auf web-kit
CSS:
HTML:
Es ist ein hack, aber dies können Sie erreichen, Effekt der in einigen Fällen mit dem hintergrund-Bild geben Sie den Gradienten und dann die Maskierung des eigentlichen hintergrund mit box-shadow. Zum Beispiel:
Aus: http://blog.nateps.com/the-elusive-css-border-gradient
Ich Stimme mit szajmon. Das einzige problem mit ihm und Quentin die Antworten von cross-browser-Kompatibilität.
HTML:
CSS:
filter
zu unterstützen, DH für eine solche kleine Sache, einfach nur eine Feste Grenze.!important
. Nun, Alohci, Ihre umdrehung zu erklären, warum auch 🙂Webkit unterstützt die Steigungen in Grenzen, und nun nimmt die Steigung in der Mozilla-format.
Firefox Ansprüche auf Unterstützung-Gradienten in zwei Arten:
IE9 hat keine Unterstützung.
Anderen hack, um die gleiche Wirkung zu nutzen, mehrere hintergrund-Bilder, ein Leistungsmerkmal, das in IE9+, newish Firefox, und die meisten WebKit-basierte Browser: http://caniuse.com/#feat=multibackgrounds
Gibt es auch einige Optionen für die Verwendung von mehreren Hintergründen im IE6-8: http://www.beyondhyper.com/css3-multiple-backgrounds-in-non-supportive-browsers/
Angenommen, Sie möchten einen 5px breiten linken Rand, der ein linearer Farbverlauf von blau zu weiß. Erstellen Sie den Farbverlauf als Bild-und exportieren in das PNG. Liste alle anderen CSS-Hintergründe nach der eine für den linken Rand, Farbverlauf:
Können Sie sich dieser Technik, um den oberen, rechten und unteren Rand Gradienten durch änderung der hintergrund-position Teil des
background
Kurzschrift-Eigenschaft.Hier ein jsFiddle für das gegebene Beispiel: http://jsfiddle.net/jLnDt/
Verlauf der Grenzen von Css-Tricks: http://css-tricks.com/examples/GradientBorder/
Für cross-browser-Unterstützung können Sie versuchen, so gut imitieren einen Farbverlauf Grenze
:before
oder:after
pseudo-Elemente, hängt davon ab, was Sie tun möchten.Dieser versuchen, bei mir hat es geklappt.
Link zu der Geige
https://jsfiddle.net/yash009/kayjqve3/1/ hoffe, das hilft
Beispiel für Gradient Grenze
Mit Grenze-Bild css-Eigenschaft
Credits : border-image in Mozilla
CSS:
HTML:
versuchen, diesen code
oder vielleicht finden Sie diese Geige: http://jsfiddle.net/necolas/vqnk9/
Hier ist eine schöne semi-cross-browser Weg, um Steigung Grenzen, fade out auf halbem Weg nach unten. Einfach durch die Einstellung der color-stop zu
rgba(0, 0, 0, 0)
Nutzung erklärt:
Mehr hier: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
Gibt es eine schöne css-tricks-Artikel zu diesem hier: https://css-tricks.com/gradient-borders-in-css/
War ich in der Lage zu kommen mit einer ziemlich einfachen single-element-Lösung, um diese über mehrere Hintergründe und hintergrund-origin-Eigenschaft.
Die schönen Dinge an diesem Ansatz sind:
Check it out: https://codepen.io/AlexOverbeck/pen/axGQyv?editors=1100