CSS3漸變效果怎樣弄

本篇內容介紹了“CSS3漸變效果怎樣弄”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

　　CSS3漸變(gradients)可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。漸變不是一個css屬性，可以把它看成一個函數，通過傳入參數(漸變方向和顏色)來返回一個視覺效果，一般用在background屬性中，注意，不能用在background-color中。

　　線型漸變linear-gradient

　　基本用法:可以傳入顏色值，也可以傳入16進制顏色值，還可以是rgba()

　　background:linear-gradient(red,green,blue);

　　/*background:linear-gradient(#ff0000,#00ff00,#0000ff);*/

　　設置線型漸變方向

　　(W3C標準，最新的Chrome，火狐，IE11已支持)，可用值：

　　關鍵字：toright/tobottom/toleft/totop

　　角度值：0deg360deg

　　默認值tobottom(180deg)

　　background:linear-gradient(toleft,red,green,blue);

　　background:linear-gradient(0deg,red,green,blue);

　　瀏覽器私有前綴標準(瀏覽器私有前綴標準的坐標系和W3C標準不一樣，但是默認效果是一樣的，默認240deg)

　　background:-webkit-linear-gradient(0deg,red,green,blue);

　　background:-moz-linear-gradient(0deg,red,green,blue);

　　background:-ms-linear-gradient(0deg,red,green,blue);

　　設置漸變界限

　　為相應的顏色區域設置一個數值(0%-100%)，來表示他的顏色區域中心點的坐標。通過他可以調整相鄰顏色之間漸變區間的大小

　　background:linear-gradient(90deg,red,green,yellow);

　　//相當于

　　background:linear-gradient(90deg,red0,green50%,yellow100%);

　　//green漸變到yellow的區間變大了，占據了整個容器75%的寬度

　　background:linear-gradient(90deg,red,green25%,yellow);

　　//相當于

　　background:linear-gradient(90deg,red0,green25%,yellow100%);

“CSS3漸變效果怎樣弄”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！