CSS容器背景如何實現顏色漸變

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

語法

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

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

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

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

第一個

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

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

第二個

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

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

第三個

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

to top 設置漸變 從下到上，相當于 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容器背景如何實現顏色漸變”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!