border-image verstehen

Die neue CSS3-Eigenschaft border-image ist etwas knifflig, aber sie ermöglicht es Ihnen, flexible Boxen mit benutzerdefinierten Rändern (oder Schatten, falls Ihnen das gefällt) mit einem einzigen Div und einem einzigen Bild zu erstellen. In diesem Artikel erkläre ich, wie dieborder-imageKurzschreibweise in heutigen Browsern funktioniert.

Die Grundidee

Die Kurzschreibweise border-image hat 3 Teile

border-image: url(border-image.png) 25% repeat;

Im Wesentlichen ermöglichen diese Ihnen anzugeben

1. Ein Bild, das als Rand verwendet werden soll
2. Wo dieses Bild geschnitten werden soll, um das Bild in 9 Abschnitte zu unterteilen
3. Wie der Browser diese Abschnitte auf die Kanten Ihres Elements anwenden soll

Die relevanten Details

Betrachten wir jeden Teil des Prozesses etwas detaillierter. Der erste Teil ist einfach und bekannt aus derbackground-imageEigenschaft. Zu Demonstrationszwecken verwende ich dieses Bild, das 100 x 100 Pixel groß ist.

Schneiden Ihres Bildes

Der zweite Teil kann, ähnlich wie bei derborder-widthEigenschaft, ein bis vier Werte haben und diese werden in derselben Reihenfolge angegeben: oben, rechts, unten, links. Sie können Prozente oder Pixel verwenden. Seltsamerweise erfordern die Prozente das "%", während Pixel *ohne "px"* aufgeführt werden sollten.

border-image: url(my-image.gif) 25% 30% 10% 20% repeat;
border-image: url(my-image.gif) 25 30 10 20 repeat;

In diesem Fall, da mein Bild 100 x 100 Pixel groß ist, sind die beiden obigen Regeln gleichwertig – sie schneiden das Bild an denselben Stellen. Ich habe einige Abmessungen auf meinem Bild hinzugefügt, um dies zu demonstrieren.

Wiederholen, Abrunden, Strecken

border-image platziert die Eckabschnitte Ihres Bildes immer in die entsprechenden Ecken Ihrer Elementbox, aber der dritte Teil der Kurzschreibweise sagt dem Browser, wie er die mittleren Abschnitte Ihres Bildes behandeln soll – diejenigen, die entlang der Kanten Ihres Elements verlaufen.

Repeat (das Bild wiederholen oder kacheln) und stretch (das Bild strecken oder skalieren) sind ziemlich selbsterklärend.

Round bedeutet, das Bild zu kacheln, aber nur so, dass eine ganze Anzahl von Kacheln passt, und ansonsten das Bild zu skalieren. Derzeit interpretieren Safari und Chrome round als repeat. Es kann bis zu zwei Werte geben: einen für die oberen und unteren Kanten des Elements und einen für die linken und rechten.

Hier ist ein Beispiel, bei dem der Wert für oben/unten auf repeat und der Wert für links/rechts auf stretch gesetzt ist.

#example-one {
  border-width: 25px 30px 10px 20px;
  border-image: url("border-image.png") 25 30 10 20 repeat stretch;
}

Randbreite

border-image tut nichts, wenn Sie keine Breite für Ihren Rand angeben. Für Browser, dieborder-imageverstehen, werden Ihre Bildabschnitte auf die angegebene Breite skaliert. Wenn Sie dieborderKurzschreibweise verwenden, bietet dies einen schönen Fallback für Browser, die dies nicht tun

#example-two {
  border: 50px double orange;
  border-image: url("border-image.png") 25 30 10 20 repeat;
}

Oder Sie können jede Breite individuell angeben (in diesem Beispiel habe ich Breiten angegeben, sodass die Bildabschnitte überhaupt nicht skaliert werden).

#example-three {
  border-color: orange;
  border-style: double;
  border-width: 25px 30px 10px 20px;
  border-image: url("border-image.png") 25 30 10 20 repeat;
}

Die Verwendung eines einfachen Rands mit denselben Breiten wie Ihr border-image ist jedoch nicht immer ideal. Daher möchten Sie möglicherweise bedingte Stylesheets verwenden, um IE ganz andere Randstile zu geben.

Browser-Eigenheiten

Vorhersehbar versteht IE nichts vonborder-image. Browser, die border-image unterstützen, unterstützen nur die Kurzschreibweise, nicht alle einzelnen Eigenschaften, die in der Spezifikation beschrieben sind. Einige potenziell nützliche Eigenschaften werden überhaupt nicht unterstützt, insbesondereborder-image-outset, was dieses Problem lösen würde.

Außerdem ist das Standardverhalten, den mittleren Abschnitt des Bildes zu verwerfen und das Schlüsselwort ‘fill’ auf derborder-image-sliceEigenschaft zu verwenden, um ihn zu erhalten.

Das Schlüsselwort fill bewirkt, wenn es vorhanden ist, dass der mittlere Teil des border-image erhalten bleibt. (Standardmäßig wird er verworfen, d. h. als leer behandelt.) (Spezifikation lesen)

Aber das aktuelle Browserverhalten ist, die Mitte zu erhalten, und es gibt keine Möglichkeit, dies abzuschalten. Wenn Sie also nicht möchten, dass der Inhaltsbereich Ihres Elements einen Hintergrund hat, muss der mittlere Abschnitt Ihres Bildes leer sein. Sie können dieses Füllverhalten jedoch zu Ihrem Vorteil nutzen, um einen Kasten mit einem schicken Rand und Hintergrund mit nur einem Bild zu erstellen.

Interaktive Demo

Ich habe eine border-image Demo-Seite erstellt, um mir zu helfen, diese komplizierten neuen CSS3-Eigenschaften zu verstehen. Sie können ein Bild auswählen, repeat, round oder stretch angeben und die Randbreite und das Slicing anpassen. Viel Spaß!

Beispiele in Aktion

• Chris Spooner nutzt es sehr gut, um seinen Bildern einen benutzerdefinierten Rand zu geben.
• Auf dem Reiseblog Go Pink Boots (Update: jetzt offline), den ich kürzlich erstellt habe, habe ich es verwendet, um Bildern einen zerrissenen Papierhintergrund hinzuzufügen.
• Ich verwende es auf meiner Website The Web Designers’ Review of Books (Update: jetzt offline), um Blockzitate hervorzuheben.

Wenn Sie weitere Beispiele auf Live-Websites haben, würde ich sie gerne sehen. Hinterlassen Sie einen Link in den Kommentaren!