Verlauf-Ränder in CSS

Nehmen wir an, Sie benötigen einen Verlauf-Rand um ein Element. Meine Gedanken gehen wie folgt:

Es gibt keine einfache, offensichtliche CSS-API dafür.
Ich erstelle einfach ein Wrapper-Element mit einem Hintergrund `linear-gradient`, dann wird ein inneres Element den Großteil dieses Hintergrunds verdecken, bis auf eine dünne Polsterlinie darum herum.

Vielleicht so:

Wenn Ihnen die Idee eines Wrapper-Elements widerstrebt, könnten Sie ein Pseudo-Element verwenden, solange ein negativer z-index-Wert in Ordnung ist (das wäre er nicht, wenn es viel Verschachtelung mit Elternelementen mit eigenen Hintergründen gäbe).

Hier ist ein Beispiel von Stephen Shaw, das dabei auch `border-radius` berücksichtigt.

Sie könnten sogar einzelne Seiten als dünne Pseudo-Element-Rechtecke platzieren, wenn Sie nicht alle vier Seiten benötigen.

Aber vergessen Sie nicht `border-image`, vielleicht die obskurste CSS-Eigenschaft aller Zeiten. Sie können sie verwenden, um Verlauf-Ränder auch an einzelnen Seiten zu erhalten.

Die Verwendung von `border-image` und `border-image-slice` ist wahrscheinlich die einfachste Syntax für einen Verlauf-Rand, leider ist sie mit `border-radius` inkompatibel.

DigitialOcean dokumentiert denselben Ansatz in einem anderen Tutorial.

Kommentare

RyanIndustries8

# 28. Dezember 2018

Das sind alles großartige Lösungen, aber ich hoffe wirklich, dass linear-gradient auf Rändern in naher Zukunft Realität sein wird. Würde wirklich helfen, wenn man CSS-Grafiken erstellt.

Brad Kemper

# 28. Dezember 2018

Hallo Chris,

Ja, es war beabsichtigt, dass man linear-gradient und border-image zusammen verwenden kann. Wenn Sie auch abgerundete Ränder benötigen, sollten Sie das mit SVG und border image tun können. Ich habe das schon einmal erfolgreich gemacht, ohne die Ecken zu verzerren oder Ähnliches. Lassen Sie mich wissen, wenn ich ein Beispiel posten soll.

Chris Coyier

Permalink zum Kommentar# 28. Dezember 2018

Ich bin sicher, dass jeder eine solche Demo als Referenz genießen würde, einschließlich mir!

Brad Kemper

# 28. Dezember 2018

Als wir das Funktionieren von border-image entwarfen (vor vielen Jahren), war die Idee, dass das Bild alle abgerundeten oder ausgefallenen Ecken enthält, die Sie wünschen, und border-radius nur als Fallback verwendet werden sollte, nicht als etwas, das die Ecken weiter abschneidet.

sonya brimecombe

Permalink zum Kommentar# 7. Januar 2019

Ja, ich stimme zu, ich hätte das auch genauso gemacht.

Doug S.

# 28. Dezember 2018

Funktionierte bei mir in Firefox 64 nicht, bis ich `border-image` zu `border-image-source` änderte, da `border-image-slice: 1` in der Kaskade überschrieben wurde.

Anders Grimsrud

# 28. Dezember 2018

Interessanterweise scheint die Browserunterstützung für das letzte Beispiel inkonsistent zu sein. Wenn `border-image-slice` im Voraus deklariert ist und kein Wert für slice im `border-image`-Kurzformat vorhanden ist, wie im obigen Beispiel, verwendet Firefox 64 und Safari auf iOS 12 den Standard-Slice-Wert (der 100% ist, was zu `border-image: <image> 100%;` führt), während Chrome 71 und Opera den zuvor deklarierten Wert in das Kurzformat übernehmen (was zu `border-image: <image> 1;` führt).

Brad Kemper

Permalink zum Kommentar# 28. Dezember 2018

Kurzformen setzen die Langformen normalerweise auf ihre Anfangswerte zurück, wenn sie weggelassen werden, daher weiß ich nicht, warum Chrome und Opera das nicht tun sollten. Das letzte Beispiel scheint in iOS12 behoben zu sein, indem `border-image` in diesen beiden Klassen in `border-image-source` geändert wurde.
SelenIT

Permalink zum Kommentar# 1. Januar 2019

Sieht sehr nach einem Chromium-Fehler in der Kaskade aus. Interessanterweise zeigt Chrome DevTools in den Tabs "Styles" und "Computed" den Wert `1` von `border-image-slice` durchgestrichen an, und der Tab "Computed Styles" zeigt den Wert `100%` aus der Kurzformatdeklaration als Überschreibung an – wie es sein sollte – aber der Wert `1` scheint auf mysteriöse Weise diese Überschreibung zu "überleben".

Nebenbei bemerkt, stimme ich nicht zu, dass `border-image` (sowie seine Langform-Unterobjekte) "obskur" ist. Es ist wohl eine der am meisten *missverstandenen* CSS-Eigenschaften aller Zeiten und vielleicht erheblich unterschätzt, besonders in Kombination mit SVG-Bildern. Einige seiner Fähigkeiten wie 9-Slice-Skalierung und – insbesondere – das Malen von Dingen *außerhalb* der Box des Elements (über `border-image-outset`) sind in CSS einzigartig und können viel kürzere und sauberere Lösungen für viele Fälle bieten, die sonst Hacks mit Pseudo-Elementen oder sogar zusätzlichem Markup erfordern würden.

Joe Kotlan (@Jkotlan)

# 29. Dezember 2018

Ich bin mir bei den letzten beiden nicht sicher. Ich erhalte unterschiedliche Ergebnisse in iOS Safari. Ich würde es mir ansehen.

ccprog

# 29. Dezember 2018

Hier ist eine Variante mit SVG: https://codepen.io/ccprog/pen/BvwbKX?editors=1100 Sie versucht, so viele Spezifika wie möglich für CSS freizulegen. Beachten Sie, dass SVG 2 `rx/ry` als CSS-Eigenschaften definieren würde, aber die Implementierung ist noch unvollständig. Die Verteilung von Verläufen muss ebenfalls im Markup erfolgen. Die Verteilung von Rändern folgt den SVG-Regeln, was bedeutet, dass die Hälfte des Rands aus der Box überläuft.

George W. Park

# 31. Dezember 2018

Ich habe einen Pen, der zeigt, wie Sie background-clip verwenden können, um abgerundete Verlauf-Ränder zu erstellen: https://codepen.io/GeorgePark/pen/EEGJEj

Jupago

# 1. Januar 2019

Danke für das Schreiben! Ich habe die erste Option kürzlich verwendet, als ein Student einen animierten Verlauf-Rand haben wollte.
Funktionierte ziemlich gut: https://codepen.io/jupago/ Ich kannte border-image-slice nicht. Es könnte auch Spaß machen, clip-path auszuprobieren. Der 24ways-Artikel über Clip Paths hat mich gefragt, ob das schließlich das Nächstbeste sein wird. https://24ways.org/2018/clip-paths-know-no-bounds/

Klesus

# 1. Januar 2019

Ich habe mit dem ::before-Rand von Stephen Shaw herumgespielt. Ich habe versucht, ihn auf eines meiner funktionierenden Projekte anzuwenden, und es scheint, dass, wenn Sie irgendeine Art von Transformation auf das Basiselement anwenden, das Pseudo-Element die Hintergrundfarbe/das Hintergrundbild des Basiselements überschreibt. Ich kenne keinen Weg, dies zusammen mit transform zum Laufen zu bringen, nur etwas, das man im Hinterkopf behalten sollte, und eine Herausforderung, eine Umgehungslösung zu finden.

Alex Overbeck

# 19. April 2019

Ich konnte mit mehreren Hintergründen und der `background-origin`-Eigenschaft eine ziemlich einfache, Einzelelement-Lösung für dieses Problem finden.

.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 Vorteile dieses Ansatzes sind:
1. Er wird nicht von z-index beeinflusst.
2. Er kann leicht skaliert werden, indem einfach die Breite des transparenten Randes geändert wird.

Schauen Sie es sich an: https://codepen.io/AlexOverbeck/pen/axGQyv?editors=1100

Chris Coyier

# 31. Januar 2022

Von Leser Fabian Michael

Hallo, ich habe eine weitere Lösung für das Problem gefunden, basierend auf der guten alten 9-Slice-Skalierungstechnik. Das CSS ist ziemlich umfangreich, aber es benötigt keine zusätzlichen SVG-Elemente in Ihrem Dokument oder zusätzliche Elementverschachtelungen und könnte für einige von Ihnen interessant sein.

Geoff Graham

# 21. November 2022

Noch eine von Leser Blaz Kemperle

Ich brauchte einen responsiven Button mit Border-Gradient und Radius und transparentem Hintergrund, und nachdem die Entwickler sagten "das geht nicht", habe ich es selbst programmiert.

Geoff Graham

# 3. Februar 2023

Und noch eine von Leser Rogério Chaves

Sie können einfach `clip-path: inset(0 round 5px)` hinzufügen.

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.