CSS3漸變效果怎樣弄

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

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

　　線型漸變linear-gradient

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

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

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

　　設(shè)置線型漸變方向

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

　　關(guān)鍵字：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);

　　設(shè)置漸變界限

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

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

　　//相當(dāng)于

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

　　//green漸變到y(tǒng)ellow的區(qū)間變大了，占據(jù)了整個容器75%的寬度

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

　　//相當(dāng)于

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

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