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.