漸變

漸變需要設(shè)置給元素的圖片屬性,比如 background 或者 background-image.
注意漸變產(chǎn)生的是圖像,換句話來(lái)說(shuō),所有可以設(shè)置圖像的地方都能夠使用它,能夠減少我們頁(yè)面圖片的使用,兼容性不錯(cuò).

線性漸變

顧名思義,就是朝著某個(gè)方向發(fā)生進(jìn)行漸變

• 語(yǔ)法:

/*語(yǔ)法組合方式 可以添加多個(gè)顏色*/
background-image: linear-gradient(方向,開(kāi)始顏色 開(kāi)始位置 ,顏色2 開(kāi)始位置,顏色3 開(kāi)始位置.....);


/* 具體代碼  */
/* 朝著 右上角 從紅色到黃色*/
background-image: linear-gradient(to top left,red,yellow);

/* 朝著 順時(shí)針45度 從紅色到黃色*/
background-image: linear-gradient(45deg,red,yellow);

/* 朝著 順時(shí)針45度 紅色,黃色,綠色*/
background-image: linear-gradient(45deg,red,yellow,green);

/* 朝著 順時(shí)針45度 紅色到 10px結(jié)束 黃色從 20px開(kāi)始 */
background-image: linear-gradient(45deg,red 10px,yellow 20px);

/* 朝著 順時(shí)針45度 紅色到10%結(jié)束 黃色從 20%開(kāi)始 */
background-image: linear-gradient(45deg,red 10%,yellow 20%);

• 注意:
  • 如果上一個(gè)顏色的結(jié)束,跟下一個(gè)顏色的開(kāi)始相等,那么不會(huì)出現(xiàn)過(guò)度
  • 比如:

background-image: linear-gradient(45deg,red 10%,yellow 10%);

* 漸變?cè)诠雀铻g覽器中的過(guò)渡效果(transition)不全部支持,ie中支持過(guò)渡,所以實(shí)際工作中,不會(huì)這么用
* 漸變 在谷歌瀏覽器中可以使用background-position和transition來(lái)實(shí)現(xiàn)動(dòng)畫效果

/*語(yǔ)法組合方式2 */
background-image: linear-gradient(方向,顏色1 從0開(kāi)始直到某個(gè)值 ,顏色2 從某個(gè)值開(kāi)始,顏色2 到某個(gè)值結(jié)束,.....,最后一個(gè)顏色 從某個(gè)值開(kāi)始直到100%);

/* 具體代碼  */
background-image: linear-gradient(64deg,yellow 33.33% ,green 33.33%,green 66.66%,yellow 66.66%);

徑向漸變

指的是以某個(gè)點(diǎn)作為圓心,向四周擴(kuò)散的漸變

• 語(yǔ)法:

/* 圓形漸變寫法 */
background:radial-gradient(半徑  ,顏色1,顏色2等等);

/* 橢圓漸變寫法 */
background:radial-gradient(橫向半徑,豎向半徑  ,顏色1,顏色2等等);

/* 設(shè)置位置 */
background:radial-gradient(橫向半徑,豎向半徑  at 位置,顏色1,顏色2等等);

/*具體代碼*/
/*半徑100px 紅色 綠色*/
background:radial-gradient(100px,red,green);

/*橫向半徑100px 豎向半徑200px 紅色 綠色*/
background:radial-gradient(100px 200px,red,green);

/*橫向半徑100px  紅色10px 綠色 20px*/
background:radial-gradient(100px 200px,red 10px,green 20px);

/*橫向半徑100px  紅色10% 綠色20%*/
background:radial-gradient(100px 200px,red 10%,green 10%);

/*橫向半徑100px  紅色10% 綠色20% 在100px 100px位置*/
background:radial-gradient(100px 200px at 100px 100px,red 10%,green 10%);

• 注意:
  • 跟線性漸變一樣如果上一個(gè)顏色的結(jié)束,跟下一個(gè)顏色的開(kāi)始相等,那么不會(huì)出現(xiàn)過(guò)度
  • 比如:

background-image: radial-gradient(100px,red 10%,yellow 10%);