CSS-Hintergründe und -Rahmen

Das CSS backgrounds and borders 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 aus Bildern jeglichen Bildtyps, von Rasterbildern bis hin zu CSS-Verläufen. Die 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-Schattierungen umfassen innere und äußere Schatten, einzelne oder mehrere Schatten, und festen oder sich zu transparent verblassenden Schatten. 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 der Polsterkante undurchsichtig wäre. Der Schatten kann fest sein oder eine Verbreitungsdistanz enthalten, bei der die Schattenfarbe zu transparent übergeht.

Die Eigenschaften in diesem Modul erlauben es Ihnen auch zu definieren, ob Zellen innerhalb eines <table> gemeinsame oder getrennte 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 bestehen. Eine Reihe von Box-Schattierungen lässt den Rahmen "herausspringen". Das Element auf der linken Seite 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 mehrfachen Hintergrundbilder werden verwendet, um die Hintergrundbilder innerhalb des Inhaltsbereichs zu halten. Die Hintergrundfarbe wird auf die Polsterbox beschnitten, was verhindert, dass der Hintergrund durch die transparenten Abschnitte für das border-image und den gepunkteten 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 Schatten festzulegen, sowohl innen als auch außen.

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

Referenz

Eigenschaften

Das CSS backgrounds module level 4 führt auch 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> aufgezählter Typ

Leitfäden

Verwendung mehrerer Hintergründe: Ein oder mehrere Hintergründe auf einem Element einstellen.
Größe von Hintergrundbildern anpassen: Änderung der Größe und des Wiederholungsverhaltens von Hintergrundbildern.
Skalierung von SVG-Hintergründen: Wie das SVG-Seitenverhältnis, SVG-Dimensionswerte und die CSS-background-size-Eigenschaft die Skalierung von SVG-Hintergrundbildern beeinflussen.
Verwendung von CSS-Verläufen: Erstellen von CSS-Verläufen und deren Verwendung als Hintergrundbilder.
CSS lernen: Hintergründe und Rahmen: Lernen, wie dekorative Bilder mit CSS-Hintergrundbildern implementiert werden.
CSS lernen: 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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden