Wie kann ich in CSS abgerundete Ecken mit einem Verlaufsrahmen erstellen?

Implementieren von Randradius- und Verlaufsrandbildern

Elemente mit abgerundetem Rand und Verlauf zu gestalten kann eine Herausforderung sein. Der Versuch, sowohl die Eigenschaften „Rahmenradius“ als auch „Rahmenbild“ zu kombinieren, führt oft entweder zu abgerundeten Ecken ohne Farbverlauf oder zu einem Farbverlaufsrand ohne Rundung.

Lösung:

Glücklicherweise Durch den Einsatz einer Kombination von CSS-Techniken ist es möglich, sowohl abgerundete Ecken als auch Verlaufsränder zu erzielen. Hier ist eine Nicht-SVG-Lösung, die einen prägnanteren Ansatz bietet:

div {
  width: 300px;
  height: 80px;
  border: double 1em transparent;
  border-radius: 30px;
  background-image: linear-gradient(white, white),
                    linear-gradient(to right, green, gold);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

Erklärung:

• Der transparente Doppelrand legt die Breite fest und eliminiert jegliche Initialen Rahmenfarbe.
• Die Eigenschaft „Hintergrundbild“ erstellt zwei Farbverläufe: einen weißen am Anfang und einen farbigen zum Rand hin Ende.
• background-origin: border-box positioniert den Farbverlauf am Rand und richtet ihn an den abgerundeten Ecken aus.
• background-clip: content-box, border-box steuert, wie der Farbverlauf verläuft wird abgeschnitten, sodass der Rand mit Farbverlauf gefüllt bleibt und der Innenbereich weiß bleibt.

Mit dieser Technik können Sie abgerundete Ecken und Farbverlauf stilvoll kombinieren Grenzen.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS abgerundete Ecken mit einem Verlaufsrahmen erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!