CSS: Linearer vertikaler Farbverlauf in einer Box

Leider schreibst du nicht, was du schon probiert hast. Dass dein Farbverlauf nicht in allen Browsern funktioniert, kann aber mehrere Ursachen haben.

Wir müssen beachten, dass der Browser die entsprechenden Eigenschaften auch unterstützten muss. Die Eigenschaft "linear-gradient" in ihrer Reinform wird nur von Browsern verstanden, die CSS3 kompatibel sind. Für Vorgängerversionen benötigt man ein entsprechendes Präfix, damit das CSS verstanden wird, ganz alte Browser wie zum Beispiel der Internet Explorer 6 können mit den Regeln gar nichts anfangen.

Du solltest folgende CSS Regeln verwenden:

/*Firefox*/
background:-moz-linear-gradient(top, #000, #FFF);
/*Safari und Chrome*/
background:-webkit-gradient(linear, left top,
left bottom, from(#000), to(#FFF));
/*Safari und Chrome (neu)*/
background:-webkit-linear-gradient(top, #000, #FFF);
/*Opera*/
background:-o-linear-gradient(top, #000, #FFF); 
/*Internet Explorer*/
background:-ms-linear-gradient(top, #000, #FFF);
/*CSS 3*/
background:linear-gradient(#000, #FFF);

Zunächst sieht man die CSS Regeln mit Präfix für die erwähnten Browser, danach die CSS3 Regel für alle Browser, die CSS3 unterstützen.
20.03.2012 um 22:52