CSS Hintergründe und Rahmen

Das CSS-Hintergründe und Rahmen-Modul stellt Eigenschaften zur Verfügung, um Elemente mit Rahmen, abgerundeten Ecken und Box-Schatten zu versehen.

Sie können verschiedene Arten von Rahmenstilen hinzufügen, einschließlich Rahmen aus Bildern jeder Art, von Rasterbildern bis hin zu CSS-Verläufen. Rahmen können eckig oder abgerundet sein, und ein unterschiedlicher Radius kann für jede Ecke festgelegt werden. Elemente können abgerundet werden, unabhängig davon, ob sie einen sichtbaren Rahmen haben oder nicht.

Box-Schatten umfassen innere und äußere Schatten, einzelne oder mehrere Schatten, und können vollständig oder allmählich zu transparent auslaufen. Ein äußerer Box-Schatten wirft einen Schatten, als ob das Rahmenrechteck des Elements undurchsichtig wäre. Ein innerer Box-Schatten wirft einen Schatten, als ob alles außerhalb der Polsterrandkante undurchsichtig wäre. Der Schatten kann fest sein oder eine Ausbreitungsdistanz enthalten, bei der die Schattenfarbe zu transparent übergeht.

Die Eigenschaften in diesem Modul ermöglichen es Ihnen auch zu definieren, ob Zellen innerhalb eines <table> gemeinsame oder separate Rahmen haben sollen.

Hintergründe, Rahmen und Box-Schatten in Aktion

Dieses Beispiel für Rahmen, Hintergründe und Box-Schatten besteht aus zentrierten Hintergrundbildern, die aus linearen und radialen Verläufen bestehen. Eine Reihe von Box-Schatten lässt den Rahmen "herauspoppen". Das Element auf der linken Seite hat ein Rahmenbild eingestellt. Das Element auf der rechten Seite hat einen abgerundeten gepunkteten Rahmen.

Die Hintergrundbilder werden mit background-image definiert. Die Bilder werden mit background-position zentriert. Verschiedene Werte der background-clip-Eigenschaft für die verschiedenen Hintergrundbilder werden verwendet, um die Hintergrundbilder innerhalb der Inhaltsbox zu halten. Die Hintergrundfarbe wird auf die Polsterbox geklippt, um zu verhindern, dass der Hintergrund in den transparenten Abschnitten für das border-image und den dotted border erscheint. Die abgerundeten Ecken im Element auf der rechten Seite werden mit der border-radius-Eigenschaft erzeugt. Eine einzige box-shadow-Deklaration wird verwendet, um alle Schatten festzulegen, sowohl inwendig als auch auswendig.

Klicken Sie oben im Beispiel auf "Play", um den Code für die Animation im MDN Playground zu sehen oder zu bearbeiten.

Referenz

Eigenschaften

Datentypen

Leitfäden

CSS lernen: Hintergrund und Rahmen

Erklärt, wie dekorative Bilder mit CSS-Hintergrundbildern implementiert werden.

Verwendung mehrerer Hintergründe

Erklärt, wie man ein oder mehrere Hintergründe auf ein Element anwendet.

Hintergrundbilder skalieren

Beschreibt, wie die Größe und das Wiederholungsverhalten von Hintergrundbildern geändert werden können.

CSS lernen: Das Box-Modell

Erklärt, wie Rahmen, zusammen mit anderen Box-Modell-Eigenschaften, das CSS-Box-Modell beeinflussen.

Verwendung von CSS-Verläufen

Erklärt, wie CSS-Verlaufs-Hintergrundbilder erstellt werden.

Verwandte Konzepte

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 3

Siehe auch