CSS-Hintergründe und -Rahmen

Das CSS backgrounds and borders Modul 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 jeglichen Bildtyps 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 innere und äußere Schatten, einzelne oder mehrere Schatten, und können fest oder bis zu transparenten Bereichen verblassend 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 padding-Randes undurchsichtig wäre. Der Schatten kann fest sein oder eine Ausbreitungsdistanz mit dem Schattenfarbübergang zu transparent einbeziehen.

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 im Einsatz

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 "hervortreten". Das Element links hat ein Rahmenbild gesetzt. 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 sind mit background-position zentriert. Verschiedene Werte der background-clip Eigenschaft für die mehreren Hintergrundbilder werden verwendet, um die Hintergrundbilder im Inhaltsbereich zu halten. Die Hintergrundfarbe wird auf den padding-Bereich beschnitten, wodurch verhindert wird, dass der Hintergrund durch die transparenten Abschnitte für die border-image und den dotted border erscheint. Die abgerundeten Ecken im Element rechts werden mit der border-radius Eigenschaft erzeugt. Eine einzelne box-shadow Deklaration wird verwendet, um alle Schatten, sowohl innen als auch außen, zu setzen.

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

<line-style> aufgezählter Typ

Leitfaden

Learn CSS: background and borders: Erklärt, wie dekorative Bilder mit CSS-Hintergrundbildern umgesetzt werden.
Using multiple backgrounds: Erläutert, wie man einem Element ein oder mehrere Hintergründe hinzufügt.
Resizing background images: Beschreibt, wie man die Größe und das Wiederholungsverhalten von Hintergrundbildern ändert.
Learn CSS: the box model: Erklärt, wie Rahmen zusammen mit anderen Box-Modell-Eigenschaften das CSS-Box-Modell beeinflussen.
Using CSS gradients: Erklärt, wie man CSS-Verlaufshintergrundbilder erstellt.

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 3

Siehe auch

Interaktive Tools, die Ihnen erlauben, visuell Rahmenbilder, abgerundete Ecken und Box-Schatten zu erstellen:
Farben auf HTML-Elemente anwenden 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 im Einsatz

Referenz

Eigenschaften

Datentypen

Leitfaden

Verwandte Konzepte

Spezifikationen

Siehe auch