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 beliebigen Typs bestehen, von Rasterbildern bis hin zu CSS-Verläufen. Rahmen können quadratisch 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 oder nicht.

Box-Schatten umfassen Ein- und Aus-Schattierungen, einzelne oder mehrere Schatten, und können solid oder mit Übergang zu transparent gestaltet sein. Ein äußerer Box-Schatten wirft einen Schatten, als ob der 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 solid sein oder eine Ausbreitungsdistanz enthalten, bei der die Schattenfarbe zu transparent übergeht.

Die Eigenschaften in diesem Modul ermöglichen es Ihnen auch zu definieren, ob Zellen innerhalb einer <table> gemeinsame oder separate Rahmen haben sollten.

Referenz

Eigenschaften

Das CSS backgrounds-Modul 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ützen keine Browser diese Funktionen.

Datentypen

<line-style> enumerierter Typ

Leitfäden

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

Beispiele

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 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 sind mit background-image definiert. Die Bilder sind mit background-position zentriert. Verschiedene Werte der Eigenschaft background-clip für die mehreren Hintergrundbilder werden verwendet, um die Hintergrundbilder innerhalb des content-box zu halten. Die Hintergrundfarbe wird zum padding-box abgeschnitten, um zu verhindern, dass der Hintergrund durch die transparenten Bereiche für die border-image und den dotted border erscheint. Die abgerundeten Ecken im Element rechts werden mit der Eigenschaft border-radius erstellt. Eine einzelne box-shadow-Deklaration wird verwendet, um alle Schatten sowohl einwärts als auch auswärts festzulegen.

Klicken Sie im obigen Beispiel auf "Play", um den Code für die Animation im MDN Playground anzuzeigen 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
Anwenden von Farben auf HTML-Elemente mit CSS
Werkzeuge:

Help improve MDN

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

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