Для FF используется
-moz-linear-gradient, для Safari/Chrome — -webkit-gradient, для IE — DXImageTransform.Microsoft.gradient.Вот только Opera 10 ещё не поддерживает CSS3 Gradient :(
Зато она поддерживает масштабирование background-image!
Рисуем маленький градиент в фотошопе, подключаем его через data:URI и масштабируем на размер блока!
background-size — для Opera, -o-background-size — для старой Opera, -webkit-background-size — для старого Safari, -khtml-background-size — для Konqueror.background-clip и background-origin — для кроссбраузерного отображения фона при наличии border.base64-кодирование — для оптимизации, можно конечно и отдельную картинку грузить.
div.lipsum {padding: 2em; border: 10px dashed #000;<br/><br/> background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACACAMAAAD9J/PGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUdQTFRF/Pz8zc3N2traz8/P0NDR0tLS0NDQ9fX1+Pj4//7/9PT04uLi6Ojo39/fzs3NzMzM/f7+3Nzc9fb26uvq6urp4ODh9/f44+Pj+vn519fX29zb19bX1tXV6Onp5OPk2dnY+/r79vX1+vv7+vr6+Pn4+fr6/////v7+0dHR09PT/fz80tPS0dHS/Pv78vPzzs7P/v39zs7O7/Dv/f393t7d8vLx3+Dg2drZ8PDw8fHw5+bn2dnZ7ezt7+/v5eXl5OTl+fn46+vr7u7u6urq1NTV1dXV4ODg2NnY7O3s19fY09TUz87P4eHh09PS9PP0zczM7u7t3Nzd8vLy29va8fHx5uXm5ubm7u7v5OTk1dXU19fW3Nvc5+fn+/v71tbV3d3dz87O7Ovs6Ofn3t7e9vf28/Pz4+Pi7Ozs8O/v9/f31NTT/P399vb3QCtbEwAAAKZJREFUeNokw9NSBQAUQNGV3c22bdu2bdf/P3em9potIWFf0p/8MKjfg20pIT2khg490kK3XZ22fLm0YlWNO1eqVdq0rt60ccnhWJVrhwrdG/EsL4xZU2pHTnhTrs6FeXNOnZly40luqFViWbFFj95tmHFgyblZH4ZMmHRi1JE+r/Zkh4zQqMiPF5/KZIYWCyq0atakwa1e/3X5NmxAQcjSHrf9CjAAht4XiD8Rf/EAAAAASUVORK5CYII=)<br/> no-repeat;<br/> -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; -khtml-background-size: 100% 100%; background-size: 100% 100%;<br/> <br/> background: -moz-linear-gradient(top,#ccc,#fff);<br/> background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));<br/> filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#cccccc,endColorstr=#ffffff,GradientType=0); zoom: 1;<br/> background: linear-gradient(top,#ccc,#fff);<br/> <br/> background-clip: border-box; -moz-background-clip: border; -webkit-background-clip: border-box;<br/> background-origin: border-box; -moz-background-origin: border; -webkit-background-origin: border-box;<br/>} <br/>
Пример (работает в IE6/7/8,FF3.6,SF3/4,Chrome,Opera 9.6/10)К сожалению в FF3.5 не работает ни gradient ни background-size, но его доля всего 5% и она уменьшается вдвое каждый месяц (март 2010 / апрель 2010).
Для него можно повесить большую картинку:
@-moz-document url-prefix()
{
div.lipsum {background: url("%some-big-gradient-image%"); background: -moz-linear-gradient(top,#ccc,#fff);}
}RTFM:
- Linear Gradient
— собственно сами градиенты [ -moz-linear-gradient / -webkit-gradient / DXImageTransform.Microsoft.Gradient ] - background-clip — где отображается фон [ -moz-background-clip / -webkit-background-clip ]
- background-origin — откуда позиционируется фон [ -moz-background-origin / -webkit-background-origin ]
- background-size — размер фона [ -o-background-size / -webkit-background-size ]
