FFの場合は
-moz-linear-gradient
-webkit-gradient
、Safari / Chromeの
-webkit-gradient
を
DXImageTransform.Microsoft.gradient
、IEの
DXImageTransform.Microsoft.gradient
。
Opera 10はまだCSS3 Gradientをサポートしていません:(
ただし、 背景画像のスケーリングはサポートされています ！
Photoshopで小さなグラデーションを描画し、データ：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ではグラデーションも背景サイズも機能しませんが、そのシェアはわずか5％であり、毎月半分になります（ 2010年3月 / 2010年4月 ）。
彼のために、あなたは大きな絵を掛けることができます：
@-moz-document url-prefix()
{
div.lipsum {background: url("%some-big-gradient-image%"); background: -moz-linear-gradient(top,#ccc,#fff);}
}
RTFM：
- 線形勾配
-グラデーション自体[ -moz-linear-gradient / -webkit-gradient / DXImageTransform.Microsoft.Gradient ] - 背景クリップ -背景が表示される場所[ -moz-background-clip / -webkit-background-clip ]
- 背景由来 -[ - moz-background-origin / -webkit-background-origin ]から背景が配置される場所
- 背景サイズ -背景サイズ[ -o-background-size / -webkit-background-size ]