## 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); ~~~