Wie kann ich Verlaufsränder in CSS erstellen?

So erzielen Sie Verlaufsränder in CSS

Das Anwenden von Farbverläufen auf CSS-Rahmen ist entgegen den Erwartungen nicht so einfach, wie es scheint. Während die Syntax border-color: -moz-linear-gradient(top, #555555, #111111); mag intuitiv erscheinen, erzielt aber nicht den gewünschten Effekt.

Um erfolgreich Verlaufsränder zu erstellen, müssen Sie die Eigenschaft „border-image“ in Verbindung mit „border-style“ und „border-width“ verwenden. Das folgende Code-Snippet veranschaulicht, wie dies erreicht wird:

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

Das Anwenden dieses Codes auf ein HTML-Element wie:

<p class="border">border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1</p>

ergibt einen Rahmen mit einem Farbverlauf, der von übergeht von links nach rechts über die angegebene Rahmenbreite. Beachten Sie, dass der Randradius in diesem Zusammenhang nicht funktioniert.

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