CSS Hintergründe und Rahmen

Das CSS-Modul für Hintergründe und Rahmen bietet Eigenschaften zum Hinzufügen von Hintergründen, Rahmen, 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 für jede Ecke kann ein anderer Radius festgelegt werden. Elemente können abgerundet werden, unabhängig davon, ob sie einen sichtbaren Rahmen haben oder nicht.

Box-Schatten umfassen Ein- und Ausblendeschatten, einzelne oder mehrere Schatten und können entweder fest oder transparent verlaufend sein. Ein äußerer Box-Schatten wirft einen Schatten, als ob die border-box des Elements undurchsichtig wäre. Ein innerer Box-Schatten wirft einen Schatten, als ob alles außerhalb des Randes undurchsichtig wäre. Der Schatten kann fest sein oder eine Verbreitungsdistanz mit dem Schattenübergang zu transparent haben.

Die Eigenschaften in diesem Modul ermöglichen es Ihnen auch zu definieren, 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 "herauspoppen". Das Element links hat ein Rahmenbild festgelegt. Das Element rechts 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 werden mit background-image definiert. Die Bilder werden mit background-position zentriert. Verschiedene Werte der background-clip-Eigenschaft für die mehreren Hintergrundbilder werden verwendet, um die Bilder innerhalb des Inhaltsfeldes zu halten. Die Hintergrundfarbe wird auf die Innenkante des Polsterungsbereichs beschränkt, um zu verhindern, dass der Hintergrund durch die transparenten Abschnitte für das border-image und den dotted border erscheint. Die abgerundeten Ecken im Element rechts werden mit der Eigenschaft border-radius erstellt. Eine einzelne box-shadow-Deklaration wird verwendet, um alle Schatten festzulegen, sowohl Ein- als auch Ausblendeschatten.

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

Referenz

Eigenschaften

Das CSS-Hintergründe-Modul Level 4 führt außerdem die Eigenschaften background-position-block, background-position-inline, background-repeat-block, background-repeat-inline, background-repeat-x, background-repeat-y und background-tbd ein. Derzeit unterstützt kein Browser diese Funktionen.

Datentypen

<line-style> Aufzählungstyp

Leitfäden

Verwendung mehrerer Hintergründe: Einstellen eines oder mehrerer Hintergründe auf einem Element.
Größenänderung von Hintergrundbildern: Änderung der Größe und des Wiederholungsverhaltens von Hintergrundbildern.
Skalierung von SVG-Hintergründen: Wie das SVG-Seitenverhältnis, SVG-Dimensionswerte und die CSS-Eigenschaft background-size sich auf die Skalierung von SVG-Hintergrundbildern auswirken.
Verwendung von CSS-Verläufen: Erstellung von CSS-Verläufen und deren Verwendung als Hintergrundbilder.
Lernen Sie CSS: Hintergrund und Rahmen: Lernen Sie, wie Sie dekorative Bilder mithilfe von CSS-Hintergrundbildern implementieren.
Lernen Sie CSS: das Box-Modell: Lernen Sie, wie Rahmen und andere Box-Modelleigenschaften das CSS-Box-Modell beeinflussen.

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 3
CSS Backgrounds Module Level 4

Siehe auch

filter
backdrop-filter
drop-shadow() Filterfunktion
Farbe auf HTML-Elemente mit CSS anwenden
Border-Image-Generator
Border-Radius-Generator