erstellen mehrfarbige Grenzen mit CSS

Das in der Frage bereitgestellte Bild zeigt einen Grenze mit mehreren Farben. Diese Grenze kann erstellt werden, ohne Pseudoelemente zu verwenden, sondern durch die Verwendung des Rand-Image-Eigentums zusammen mit einem linearen Gradienten. Hier erfahren Sie, wie Sie es erreichen:

Code Implementierung

.fancy-border {
  width: 150px;
  height: 150px;
  text-align: center;
  border-top: 5px solid;
  border-image: linear-gradient(to right, grey 25%, yellow 25%, yellow 50%, red 50%, red 75%, teal 75%) 5;
}

  my content

Erklärung

im obigen Code-Snippet:

• die Breite, Höhe und Text-Align-Eigenschaften konfigurieren die Konfigurieren der Eigenschaften Größe und Ausrichtung des DIV-Elements.
• Die Eigenschaft Border-Top definiert den oberen Rand des Div.
• Die Eigenschaft von Border-Image ist der Schlüssel zum Erstellen der mehrfarbigen Grenze. Es bezieht pixel.