CSS-Hintergrund und -Ränder

Das CSS-Hintergrund und -Ränder Modul bietet Eigenschaften zum Hinzufügen von Hintergründen, Rändern, abgerundeten Ecken und Box-Schatten zu Elementen.

Sie können verschiedene Arten von Randstilen hinzufügen, einschließlich Rändern, die aus Bildern jeder Bildart bestehen, von Rasterbildern bis hin zu CSS-Verläufen. Ränder können quadratisch 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 Rand haben oder nicht.

Box-Schatten umfassen innere und äußere Schatten, einzelne oder mehrere Schatten, und können solide oder allmählich transparent werden. Ein äußerer Box-Schatten wirft einen Schatten, als ob die Border-Box des Elements opak wäre. Ein innerer Box-Schatten wirft einen Schatten, als ob alles außerhalb des Polsterrands opak wäre. Der Schatten kann solide sein oder eine Ausbreitungsdistanz mit einer Farbüberblendung zum Transparenten enthalten.

Die Eigenschaften in diesem Modul erlauben es Ihnen auch zu definieren, ob Zellen innerhalb eines <table> gemeinsame oder separate Ränder haben sollen.

Referenz

Eigenschaften

Das CSS-Hintergrund Modul Level 4 führt auch die Eigenschaften background-position-block, background-position-inline, background-repeat-block, background-repeat-inline und background-tbd ein. Derzeit unterstützen keine Browser diese Funktionen.

Datentypen

<line-style> Aufzähldatentyp

Leitfäden

Verwendung mehrerer Hintergründe: Ein oder mehrere Hintergründe auf einem Element einstellen.
Hintergrundbilder skalieren: Die Größe und das Wiederholverhalten von Hintergrundbildern ändern.
SVG-Hintergründe skalieren: Wie das SVG-Seitenverhältnis, SVG-Dimensionen und die CSS-Eigenschaft background-size das Skalieren von SVG-Hintergrundbildern beeinflussen.
Verwendung von CSS-Verläufen: CSS-Verläufe erstellen und als Hintergrundbilder verwenden.
Lernen Sie CSS: Hintergrund und Ränder: Lernen Sie, wie Sie dekorative Bilder mit CSS-Hintergrundbildern implementieren.
Lernen Sie CSS: das Box-Modell: Lernen Sie, wie Ränder und andere Boxmodell-Eigenschaften das CSS-Box-Modell beeinflussen.

Beispiele

Hintergründe, Ränder und Box-Schatten im Einsatz

Dieses Beispiel von Rändern, Hintergründen und Box-Schatten besteht aus zentrierten Hintergrundbildern aus linearen und radialen Verläufen. Eine Reihe von Box-Schatten lässt den Rand hervortreten. Das Element links hat ein Randbild eingestellt. Das Element rechts hat einen abgerundeten gepunkteten Rand.

<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 innerhalb der Inhaltsbox zu halten. Die Hintergrundfarbe wird auf die Polsterbox zugeschnitten, um zu verhindern, dass der Hintergrund durch die transparenten Abschnitte für das border-image und der dotted border erscheint. Die abgerundeten Ecken im rechten Element werden mit der border-radius Eigenschaft erstellt. Eine einzige box-shadow Deklaration wird verwendet, um alle Schatten einzustellen, sowohl inneren als auch äußeren.

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

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
Tools:

Help improve MDN

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

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