漸變
漸變需要設置給元素的圖片屬性,比如 background 或者 background-image.
注意漸變產生的是圖像,換句話來說,所有可以設置圖像的地方都能夠使用它,能夠減少我們頁面圖片的使用,兼容性不錯.
線性漸變
顧名思義,就是朝著某個方向發生進行漸變
- 語法:
/*語法組合方式 可以添加多個顏色*/
background-image: linear-gradient(方向,開始顏色 開始位置 ,顏色2 開始位置,顏色3 開始位置.....);
/* 具體代碼 */
/* 朝著 右上角 從紅色到黃色*/
background-image: linear-gradient(to top left,red,yellow);
/* 朝著 順時針45度 從紅色到黃色*/
background-image: linear-gradient(45deg,red,yellow);
/* 朝著 順時針45度 紅色,黃色,綠色*/
background-image: linear-gradient(45deg,red,yellow,green);
/* 朝著 順時針45度 紅色到 10px結束 黃色從 20px開始 */
background-image: linear-gradient(45deg,red 10px,yellow 20px);
/* 朝著 順時針45度 紅色到10%結束 黃色從 20%開始 */
background-image: linear-gradient(45deg,red 10%,yellow 20%);
-
注意:
- 如果上一個顏色的結束,跟下一個顏色的開始相等,那么不會出現過度
- 比如:
background-image: linear-gradient(45deg,red 10%,yellow 10%);
* 漸變在谷歌瀏覽器中的過渡效果(transition)不全部支持,ie中支持過渡,所以實際工作中,不會這么用
* 漸變 在谷歌瀏覽器中可以使用background-position和transition來實現動畫效果
/*語法組合方式2 */
background-image: linear-gradient(方向,顏色1 從0開始直到某個值 ,顏色2 從某個值開始,顏色2 到某個值結束,.....,最后一個顏色 從某個值開始直到100%);
/* 具體代碼 */
background-image: linear-gradient(64deg,yellow 33.33% ,green 33.33%,green 66.66%,yellow 66.66%);
徑向漸變
指的是以某個點作為圓心,向四周擴散的漸變
- 語法:
/* 圓形漸變寫法 */
background:radial-gradient(半徑 ,顏色1,顏色2等等);
/* 橢圓漸變寫法 */
background:radial-gradient(橫向半徑,豎向半徑 ,顏色1,顏色2等等);
/* 設置位置 */
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%);
-
注意:
- 跟線性漸變一樣如果上一個顏色的結束,跟下一個顏色的開始相等,那么不會出現過度
- 比如:
background-image: radial-gradient(100px,red 10%,yellow 10%);
