Wie kann ich mehrfarbige Ränder in CSS erstellen, indem ich nur „border-image' verwende?

Mehrfarbige Ränder mit CSS erstellen

Das in der Frage bereitgestellte Bild zeigt einen Rahmen mit mehreren Farben. Dieser Rahmen kann ohne die Verwendung von Pseudoelementen erstellt werden, sondern durch die Verwendung der Eigenschaft „border-image“ zusammen mit einem linearen Farbverlauf. So erreichen Sie es:

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;
}

<div class="fancy-border">
  my content
</div>

Erklärung

Im obigen Codeausschnitt :

• Die Eigenschaften width, height und text-align konfigurieren die Größe und Ausrichtung des div-Elements.
• Die Eigenschaft border-top definiert den oberen Rand des div.
• Die Eigenschaft border-image ist der Schlüssel zum Erstellen des mehrfarbigen Rahmens. Es verweist auf einen linearen Farbverlauf, der sich über die Breite des Rahmens erstreckt, wobei die Farben zwischen Grau, Gelb, Rot und Blaugrün wechseln.
• Die 5 am Ende der Eigenschaft „border-image“ gibt die Breite des Farbverlaufs in an Pixel.

Das obige ist der detaillierte Inhalt vonWie kann ich mehrfarbige Ränder in CSS erstellen, indem ich nur „border-image' verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!