發布者:云商網絡 來源:http://www.b3969.com/ 發布時間:2020-4-1 6:33:35 瀏覽量:
1.線性漸變(linear-gradient)
基礎用法:background:linear-gradient(angle,start-color,soft-line,end-color);
依次解釋下這幾個參數:
angle是漸變角度,不寫則默認從上到下,也就是to bottom,當然其他類似的直角方向還有to right,to top,to left。其他的對角方向包括to left top,to right top,to bottom right,to bottom left。需要注意的是:對角線角度的單詞順序不講究順序,to bottom right和to right bottom是一樣的意思。
start-color && end-color表示起始色標和終止色標,支持16進制顏色(如"#85e96c"),h5示例顏色(如"aqua"),rgb(如"rgb(133, 233, 108)"),rgba("rgb(133, 233, 108,.5)")、transparent。
soft-line:柔性分界。不寫則默認50%。表示兩種顏色過渡的柔和邊界,不是硬性邊界。
?。ㄈ绻雽懸粭l硬線,也就是所謂的hard line來進行無漸變分割,則在兩個色標尾部緊接著寫上50%,注意,除了50%其他都不能完全消除漸變效果。這是一個去漸變的硬線分割寫法)
配合背景圖使用,注意漸變效果要寫在url引入的背景圖之前。是不是覺得這種效果沒什么卵用呢?我覺得也是。
2.徑向漸變(radial-gradient)
基礎語法:radial-gradient(shape,start-color, soft-line,end-color )
shape即漸變的形狀,不寫則為默認的ellipse橢圓,可以改為circle正圓。
其他參數的含義(start-color,end-color,soft-line),包括硬線的實現代碼,配合背景圖使用的寫法,都與線性漸變的幾個同名參數或同名操作完全相同。這里就不重復去說了?!?br />
總結:
關于漸變還有其他一些玩法,比如漸變重復、多顏色漸變等。這里只記錄兩種**基本的,因為我個人覺得這屬于比較邊緣的CSS知識,目前在項目中我還沒有使用過它。假如有**CSS漸變能在前端項目中大放異彩,再對它做深入的研究也不遲。