## CSS 背景渐变 **线性渐变** ~~~ { background:linear-gradient(top,#fff,#000); background:-moz-linear-gradient(top,#fff,#000); background:-webkit-linear-gradient(top,#fff,#000); } ~~~ 第一个参数是起点，可以是 top、left、right、bottom、left top ...； 第一个参数可以是角度，0reg是从下到上，顺时针旋转； 后面的参数可以多个，比如`top,#fff,#000,#fff,#0ff`； 还可以设置每个颜色的f位置，比如`top,#fff 0%,#000 50%,#fff 60%,#0ff 100%`； *多点渐变* ~~~ { background:linear-gradient(top,#fff 0%,#000 50%,#ff0 100%); background:-moz-linear-gradient(top,#fff,#000,rbga(255,0,0,0.5)); background:-webkit-linear-gradient(top,#fff,#000,#fff); } ~~~ ****** **径向渐变** ~~~ background:radial-gradient(center,#fff,#000); background:-moz-radial-gradient(top,#fff,#000); background:-webkit-radial-gradient(left top,#fff,#000); ~~~ 位置可以是方向，也可以是坐标点如`10px 30px`; 后面的参数可以多个，比如`top,#fff,#000,#fff,#0ff`； 还可以设置每个颜色的f位置，比如`top,#fff 0%,#000 50%,#fff 60%,#0ff 100%`； ****** **混合渐变** ~~~ background:radial-gradient(center,#fff,#000) ,linear-gradient(top,#fff,#000) ,url(xxx.png); background:-moz-radial-gradient(top,#fff,#000) ,-moz-linear-gradient(top,#fff,#000) ,url(xxx.png); background:-webkit-radial-gradient(left top,#fff,#000) ,-webkit-linear-gradient(top,#fff,#000,#fff) ,url(xxx.png); ~~~