這篇文章主要介紹了CSS容器背景如何實現(xiàn)顏色漸變，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司是由多位在大型網(wǎng)絡(luò)公司、廣告設(shè)計公司的優(yōu)秀設(shè)計人員和策劃人員組成的一個具有豐富經(jīng)驗的團隊，其中包括網(wǎng)站策劃、網(wǎng)頁美工、網(wǎng)站程序員、網(wǎng)頁設(shè)計師、平面廣告設(shè)計師、網(wǎng)絡(luò)營銷人員及形象策劃。承接：做網(wǎng)站、成都網(wǎng)站制作、網(wǎng)站改版、網(wǎng)頁設(shè)計制作、網(wǎng)站建設(shè)與維護、網(wǎng)絡(luò)推廣、數(shù)據(jù)庫開發(fā),以高性價比制作企業(yè)網(wǎng)站、行業(yè)門戶平臺等全方位的服務(wù)。

語法

background: linear-gradient(direction,color-stop1,color-stop2,...);

• direction：用角度值指定漸變的方向（或角度）。

• color-stop1,color-stop2,...：用于指定漸變的起止顏色。

注意：至少需要兩種顏色。

第一個

background: linear-gradient(to left,#d3959b,#bfe6ba);

to left 設(shè)置漸變 從右到左，相當于 270deg。

第二個

background: linear-gradient(to right,#d3959b,#bfe6ba);

to right 設(shè)置漸變 從左到右，相當于 90deg。

第三個

background: linear-gradient(to top,#d3959b,#bfe6ba);

to top 設(shè)置漸變 從下到上，相當于 0deg。

第四個

background: linear-gradient(to bottom,#d3959b,#bfe6ba);

第五個

background: linear-gradient(to top right,#d3959b,#bfe6ba);

to right top = to top right ：從左下角到 右上角，對角線角度

第六個

background: linear-gradient(45deg,#d3959b,#bfe6ba);

和 to top right 有細微差別（背景為正方形的時候無差別）。

第七種

background: linear-gradient(45deg,#d3959b 20%,#bfe6ba);

用百分比指定起始顏色的位置，默認值為 0%。

第八種

background: linear-gradient(to right,#feac5e,#c779d0,#4bc0c8);

第九種

background: linear-gradient(45deg,#feac5e,#c779d0,#4bc0c8);

第十種

background: linear-gradient(45deg,rgba(254,172,94,0.5),rgba(199,121,208,0.5),rgba(75,192,200,0.5));

rgba 使用了 0.5 的透明度。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS容器背景如何實現(xiàn)顏色漸變”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習!