CSS-Hintergründe und Rahmen

Das CSS backgrounds and borders Modul stellt Eigenschaften zur Verfügung, um Elementen Hintergründe, Rahmen, abgerundete Ecken und Box-Schatten hinzuzufügen.

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 für jede Ecke kann ein anderer Radius festgelegt werden. Elemente können abgerundet sein, unabhängig davon, ob sie einen sichtbaren Rahmen haben.

Box-Schatten beinhalten innere und äußere Schatten, einzelne oder mehrere Schatten, und sie können fest oder mit einem Farbverlauf zu transparent sein. Ein äußerer Box-Schatten wirft einen Schatten, als ob das border-box des Elements undurchsichtig wäre. Ein innerer Box-Schatten wirft einen Schatten, als ob alles außerhalb der padding-Kante undurchsichtig wäre. Der Schatten kann fest sein oder eine Ausdehnungsdistanz beinhalten, bei der der Schattenfarbverlauf zu transparent übergeht.

Die Eigenschaften in diesem Modul lassen Sie außerdem definieren, ob Zellen innerhalb eines <table> gemeinsame oder getrennte Rahmen haben sollen.

Hintergründe, Rahmen und Box-Schatten in Aktion

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 "herausspringen". Das Element auf der linken Seite hat ein Rahmenbild gesetzt. Das Element auf der rechten Seite 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 werden mit background-position zentriert. Verschiedene Werte der background-clip-Eigenschaft werden für die mehreren Hintergrundbilder verwendet, um sie innerhalb der Inhaltsbox zu halten. Die Hintergrundfarbe wird auf die padding-Box zugeschnitten, um zu verhindern, dass der Hintergrund durch die transparenten Abschnitte 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 einzelne box-shadow-Deklaration wird verwendet, um alle Schatten, sowohl innen als auch außen, festzulegen.

Referenz

Eigenschaften

Das CSS backgrounds Modul Level 4 führt auch die background-position-block, background-position-inline, background-repeat-block, background-repeat-inline und background-tbd Eigenschaften ein. Derzeit werden diese Funktionen von keinem Browser unterstützt.

Datentypen

<line-style> aufgezählter Typ

Leitfäden

Verwendung mehrerer Hintergründe: Ein oder mehrere Hintergründe auf ein Element setzen.
Größe von Hintergrundbildern ändern: Ändert das Größen- und Wiederholungsverhalten von Hintergrundbildern.
SVG-Hintergründe skalieren: Wie svg-Seitenverhältnis, SVG-Dimensionswerte und die CSS-Eigenschaft background-size 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 Sie, wie Sie dekorative Bilder mit CSS-Hintergrundbildern implementieren.
CSS lernen: das Box-Modell: Lernen 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
Anwenden von Farben auf HTML-Elemente mit CSS
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