CSS Hintergründe und Rahmen

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 "hervorspringen". Das linke Element hat ein Rahmenbild gesetzt. Das rechte Element 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. Unterschiedliche Werte der background-clip Eigenschaft für die mehrfachen Hintergrundbilder werden verwendet, damit die Hintergrundbilder innerhalb der content-box bleiben. Die Hintergrundfarbe wird auf die padding-box gekürzt, um zu verhindern, dass der Hintergrund durch die transparenten Abschnitte für das border-image und das dotted border erscheint. Die abgerundeten Ecken im rechten Element werden mit der border-radius Eigenschaft erstellt. Eine einzelne box-shadow Deklaration wird verwendet, um alle Schatten, sowohl innenliegend als auch außenliegend, festzulegen.

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

Referenz

Eigenschaften

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size
• background Kurzform
• background-position-x
• background-position-y
• border-bottom-color
• border-bottom-style
• border-bottom-width
• border-bottom Kurzform
• border-left-color
• border-left-style
• border-left-width
• border-left Kurzform
• border-right-color
• border-right-style
• border-right-width
• border-right Kurzform
• border-top-color
• border-top-style
• border-top-width
• border-top Kurzform
• border-color Kurzform
• border-style Kurzform
• border-width Kurzform
• border Kurzform
• border-bottom-left-radius
• border-bottom-right-radius
• border-top-left-radius
• border-top-right-radius
• border-radius Kurzform
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-image Kurzform
• box-shadow

Das CSS Hintergründe Modul Ebene 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> aufgelisteter Typ

Leitfäden

Verwendung mehrerer Hintergründe

Festlegen von einem oder mehreren Hintergründen auf einem Element.

Hintergrundbilder skalieren

Ändern der Größe und des Wiederholungsverhaltens 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

Erstellen von CSS-Verläufen und deren Verwendung als Hintergrundbilder.

Lernen Sie CSS: Hintergrund und Rahmen

Lernen Sie, wie dekorative Bilder mit CSS-Hintergrundbildern implementiert werden.

Lernen Sie CSS: das Box-Modell

Lernen Sie, wie Rahmen und andere Eigenschaften des Box-Modells das CSS-Box-Modell beeinflussen.

Verwandte Konzepte

• border-block-end-color
• border-block-start-color
• border-inline-end-color
• border-inline-start-color
• border-block-end-style
• border-block-start-style
• border-inline-end-style
• border-inline-start-style
• border-block-end-width
• border-block-start-width
• border-inline-end-width
• border-inline-start-width
• border-start-start-radius
• border-start-end-radius
• border-end-start-radius
• border-end-end-radius
• box-sizing
• box-decoration-break
• text-shadow
• <url> Datentyp
• <url> Datentyp
• <image> Datentyp
• position Datentyp
• currentColor Schlüsselwort

Spezifikationen

Siehe auch

• filter
• backdrop-filter
• drop-shadow() Filterfunktion
• Anwenden von Farbe auf HTML-Elemente mit CSS
• Border-Image-Generator
• Border-Radius-Generator