Im Firefox ab 29 funktionieren auch Farbverläufe bei Rahmenbildern. Das habe ich zum Anlass genommen, mit diesen Eigenschaften einmal herumzuspielen.

Das Prinzip ist folgendermaßen:
Hinter der CSS3-Eigenschaft border-image
notiert man linear-gradient()
für einen linearen Farbverlauf oder radial-gradient()
für einen radialen. Außerdem bestimmt man, wie der Farbverlauf aufgeteilt werden soll und gibt ein Schlüsselwort wie round
, stretch
oder repeat
an:
border-image: linear-gradient(white, #4972A4) 10% round;
Ein paar Beispiele zum Anschauen und Experimentieren gibt es hier – sie funktionieren im Firefox 29, im Chrome und auch im Internet Explorer 11.
Noch ein wichtiger Hinweis:
Damit die Anzeige des Rahmens klappt, muss man einen border-style
definieren – macht man das nicht, funktioniert der Rahmen nicht.
Kommentare sind geschlossen.