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-Schattierungen zu Elementen.

Sie können verschiedene Arten von Rahmenstilen hinzufügen, einschließlich Rahmen aus Bildern jeglichen Bildtyps, 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 sein, unabhängig davon, ob sie einen sichtbaren Rahmen haben oder nicht.

Box-Schattierungen umfassen sowohl eingehende als auch ausgehende Schattierung, einzelne oder mehrere Schattierungen, und solid oder mit Übergängen auf transparent. Ein äußerer Box-Schatten wirft einen Schatten, als ob die Rahmenbox des Elements undurchsichtig wäre. Ein innerer Box-Schatten wirft einen Schatten, als ob alles außerhalb des Randelements undurchsichtig wäre. Der Schatten kann solide sein oder eine Ausbreitungsdistanz beinhalten, wobei die Schattenfarbe in Transparent übergeht.

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

Hintergründe, Rahmen und Box-Schattierungen in Aktion

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

<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 Eigenschaft background-clip für die mehreren Hintergrundbilder werden verwendet, um die Hintergrundbilder innerhalb des Inhaltsfelds zu halten. Die Hintergrundfarbe wird zum Auffüllfeld geklippt, 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 Eigenschaft border-radius erstellt. Eine einzelne box-shadow-Deklaration wird verwendet, um alle Schatten festzulegen, sowohl eingehend als auch ausgehend.

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

Referenz

Eigenschaften

Hinweis: Das CSS Modul für Hintergründe Level 4 führt die Eigenschaften background-position-block, background-position-inline, background-repeat-block, background-repeat-inline, background-repeat-x, background-repeat-y, und background-tbd ein. Diese wurden noch nicht implementiert.

Datentypen

<line-style> Enumerations-Typ

Leitfäden

Verwendung mehrerer Hintergründe: Festlegen eines oder mehrerer Hintergründe auf einem Element.
Größe von Hintergrundbildern ändern: Größe und Wiederholungsverhalten von Hintergrundbildern ändern.
Skalierung von SVG-Hintergründen: Wie das SVG-Aspektverhältnis, SVG-Dimensionswerte und die CSS background-size Eigenschaft die Skalierung von SVG-Hintergrundbilder beeinflussen.
Verwendung von CSS-Verläufen: Erstellung von CSS-Verläufen und deren Verwendung als Hintergrundbilder.
Lernen Sie CSS: Hintergründe und Rahmen: Erfahren Sie, wie Sie dekorative Bilder mit CSS-Hintergrundbildern implementieren.
Lernen Sie CSS: das Box-Modell: Erfahren Sie, wie Rahmen und andere Box-Modell-Eigenschaften 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
Rahmenbild-Generator
Rahmenradius-Generator