Wie erstelle ich mit CSS korrekt Verlaufsränder?

Verlaufsränder mit CSS definieren

Das Entwerfen eines Rahmens mit einem Verlaufseffekt verleiht Webelementen einen Hauch von visuellem Interesse. Mit der Eigenschaft „border-image“ in CSS können Sie Verläufe auf Ränder anwenden.

Frage:

Beim Versuch, einen Verlaufsrahmen zu erstellen, wurde der folgende Code verwendet:

border-color: -moz-linear-gradient(top, #555555, #111111);

Dieser Ansatz führte jedoch nicht zum gewünschten Ergebnis. Was ist die richtige Methode zum Implementieren von Randverläufen?

Antwort:

Die Eigenschaft border-image erfüllt diese Aufgabe. Zusammen mit „border-width“ und „border-style“ sind Farbverlaufsränder möglich.

Beispiel:

.border {
  border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1;
  border-width: 4px;
  border-style: solid;
  padding: 5px;
}

Dieser Code erstellt einen Rahmen mit einem Farbverlauf, von dem aus übergeht #3acfd5 bis #3a4ed5 von links nach rechts.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS korrekt Verlaufsränder?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!