柚子快報(bào)激活碼778899分享：前端 HTML5背景漸變效果

http://yzkb.51969.com/

設(shè)置網(wǎng)頁背景漸變標(biāo)簽:

background:linear-gradient(漸變方向,顏色1,顏色2,顏色3,.....)

?漸變方向： ????????????????to?top---?從下到上 ????????????????to?bottom---?從上到下 ????????????????to?left---?從右到左 ????????????????to?right---?從左到右 ????????????????to?top?left---?從右下到左上 ????????????????to?top?right---?從左下到右上 ????????????????to?bottom?left---?從右上到左下 ????????????????to?bottom?right---?從左上到右下 ????????????background:radial-gradient(漸變形狀,顏色1,顏色2,顏色3...); ????????????漸變形狀： ????????????????circle---?圓形 ????????????????ellipse---?橢圓形 ????????????????closest-side---?以最近邊為半徑的圓形 ????????????????closest-corner---?以最近邊為半徑的橢圓形 ????????????????farthest-side---?以最遠(yuǎn)邊為半徑的圓形 ????????????????farthest-corner---?以最遠(yuǎn)邊為半徑的橢圓形

實(shí)現(xiàn)盒子漸變效果

?? ? ?? ??? ? ?? ??? ? ?? ? ?? ? ?? ? ?? ??? ??? ?

效果圖

實(shí)現(xiàn)盒子的多種顏色向右下方漸變

?? ? ?? ??? ? ?? ??? ? ?? ? ?? ? ?? ? ?? ??? ??? ?

柚子快報(bào)激活碼778899分享：前端 HTML5背景漸變效果

http://yzkb.51969.com/

參考文章