Heim > Web-Frontend > CSS-Tutorial > Wie erstelle ich mit CSS korrekt Verlaufsränder?

Wie erstelle ich mit CSS korrekt Verlaufsränder?

Patricia Arquette
Freigeben: 2024-12-31 21:37:11
Original
485 Leute haben es durchsucht

How Do I Correctly Create Gradient Borders Using CSS?

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);
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage