CSS Hintergründe und Rahmen

Das CSS-Hintergründe und Rahmen-Modul 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, die aus Bildern jeglichen Bildtyps bestehen, von Rasterbildern bis hin zu CSS-Verläufen. Rahmen können eckig oder abgerundet sein, und es kann ein unterschiedlicher Radius 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 Innen- und Außenschattierungen, einzelne oder mehrere Schattierungen und können solide sein oder mit Transparenz verblassen. 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 Polsterrands undurchsichtig wäre. Der Schatten kann solide sein oder eine Ausbreitungsdistanz mit der Schattenfarbe beinhalten, die in 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-Schattierungen in Aktion

Dieses Beispiel von Rahmen, Hintergründen und Box-Schattierungen besteht aus zentrierten Hintergrundbildern, die aus linearen und radialen Verläufen erstellt wurden. Eine Serie von Box-Schattierungen lässt den Rahmen "hervorstehen". Das Element auf der linken Seite hat ein Rahmenbild gesetzt. Das Element auf der rechten Seite hat einen abgerundeten punktierten 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 sind mit background-position zentriert. Verschiedene Werte der background-clip-Eigenschaft für die mehrfachen Hintergrundbilder werden verwendet, um die Hintergrundbilder innerhalb des Inhaltsbereichs 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 das dotted border erscheint. Die abgerundeten Ecken im Element auf der rechten Seite werden mit der border-radius-Eigenschaft erstellt. Eine einzige box-shadow-Deklaration wird verwendet, um alle Schattierungen festzulegen, 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.

Referenz

Eigenschaften

Hinweis: Das CSS Hintergründe Modul Ebene 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 sind noch nicht implementiert.

Datentypen

<line-style> enumerierter Typ

Leitfäden

Verwenden von mehreren Hintergründen: Festlegen eines oder mehrerer Hintergründe auf einem Element.
Größe von Hintergrundbildern ändern: Ändern der Größe und Wiederholungsverhalten von Hintergrundbildern.
Skalierung von SVG-Hintergründen: Wie das Seitenverhältnis von SVG, SVG-Abmessungswerte und die CSS-Eigenschaft background-size die Skalierung von SVG-Hintergrundbildern beeinflussen.
Verwenden von CSS-Verläufen: Erstellen von CSS-Verläufen und deren Verwendung als Hintergrundbilder.
Lernen Sie CSS: Hintergründe und Rahmen: Lernen Sie, wie Sie dekorative Bilder mit CSS-Hintergrundbildern implementieren.
Lernen Sie CSS: Das Box-Modell: Lernen Sie, wie Rahmen und andere Boxmodell-Eigenschaften das CSS-Boxmodell beeinflussen.

Spezifikationen

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

Siehe auch

filter
backdrop-filter
drop-shadow() Filterfunktion
Anwendung von Farbe auf HTML-Elemente mit CSS
Randbild-Generator
Randradius-Generator