CSS Hintergründe und Rahmen

Das CSS-Hintergründe und Rahmen Modul bietet Eigenschaften zum Hinzufügen von Rändern, abgerundeten Ecken und Box-Schatten zu Elementen.

Sie können verschiedene Arten von Rahmenstilen hinzufügen, einschließlich Rahmen, die aus Bildern jeder Bildart bestehen, von Rasterbildern bis 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 ein- und auswärts gerichtete Schatten, einzelne oder mehrere Schatten, die fest oder transparent verlaufen können. Ein äußerer Box-Schatt wirft einen Schatten, als ob die Rahmen-box des Elements undurchsichtig wäre. Ein innerer Box-Schatt wirft einen Schatten, als ob alles außerhalb der Polsterungskante undurchsichtig wäre. Der Schatten kann fest sein oder einen Ausbreitungsabstand einschließen, wobei die Schattenfarbe in die Transparenz übergeht.

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

Hintergründe, Rahmen und Box-Schatten in Aktion

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

<article>
  <div></div>
  <div></div>
</article>

article {
  display: flex;
  gap: 10px;
}
div {
  color: #58ade3;
  height: 320px;
  width: 240px;
  padding: 20px;
  margin: 10px;
  border: dotted 15px; /* defaults to `currentcolor` */
  border-radius: 100px 0;
  background-image: radial-gradient(
      circle,
      transparent 60%,
      currentcolor 60% 70%,
      transparent 70%
    ),
    linear-gradient(45deg, currentcolor, white),
    linear-gradient(transparent, transparent);
  /* the third transparent background image was added to provide space for the background color to show through */
  background-color: currentcolor;
  background-position: center;
  background-size:
    60px 60px,
    120px 120px;
  background-clip: content-box, content-box, padding-box;
  box-shadow:
    inset 5px 5px 5px rgb(0 0 0 / 0.4),
    inset -5px -5px 5px rgb(0 0 0 / 0.4),
    5px 5px 5px rgb(0 0 0 / 0.4),
    -5px -5px 5px rgb(0 0 0 / 0.4);
}
div:first-of-type {
  border-radius: 0;
  border-image-source: repeating-conic-gradient(
    from 3deg at 25% 25%,
    currentColor 0 3deg,
    transparent 3deg 6deg
  );
  border-image-slice: 30;
}

Die Hintergrundbilder sind mit background-image definiert. Die Bilder sind mit background-position zentriert. Verschiedene Werte der background-clip Eigenschaft für die mehreren Hintergrundbilder werden verwendet, um die Hintergrundbilder innerhalb der Inhaltsbox zu halten. Die Hintergrundfarbe wird auf die Polsterbox zugeschnitten, um zu verhindern, dass der Hintergrund durch die transparenten Bereiche 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 einzelne box-shadow Deklaration wird verwendet, um alle Schatten einzustellen, sowohl innen als auch außen.

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

<line-style> Aufzählungstyp

Leitfäden

CSS lernen: Hintergründe und Rahmen: Erklärt, wie man dekorative Bilder mit CSS-Hintergrundbildern implementiert.
Verwendung mehrerer Hintergründe: Erklärt, wie man ein oder mehrere Hintergründe auf ein Element setzt.
Anpassen der Größe von Hintergrundbildern: Beschreibt, wie man das Verhalten der Größe und Wiederholung bei Hintergrundbildern ändert.
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 man CSS-Verlaufshintergrundbilder erstellt.

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 3

Siehe auch

Interaktive Werkzeuge, die es Ihnen ermöglichen, visuell Rahmenbilder, abgerundete Ecken und Box-Schatten zu erstellen:
Anwenden von Farbe auf HTML-Elemente mittels CSS, einschließlich für Rahmen.
Die drop-shadow() Filterfunktion, die einen Schlagschatteneffekt auf das Eingabebild anwendet. Die Funktion wird von den filter und backdrop-filter Eigenschaften verwendet.

CSS Hintergründe und Rahmen

Hintergründe, Rahmen und Box-Schatten in Aktion

Referenz

Eigenschaften

Datentypen

Leitfäden

Verwandte Konzepte

Spezifikationen

Siehe auch