線性漸變
/*
? ? ? ? ? ? 漸變不是一個新的屬性, 而是一個取值
? ? ? ? ? ? 默認情況下線性漸變是從上至下的漸變
? ? ? ? ? ? 我們可以通過在顏色的前面添加to xxx修改漸變的方向
? ? ? ? ? ? to top
? ? ? ? ? ? to left
? ? ? ? ? ? to right
?*/
? ? ? ? ? ? /*background-image: linear-gradient(to top right, red, blue);*/
? ? ? ? ? ? /*除了可以通過關鍵字控制漸變的方向以外, 還可以通過角度來控制漸變的方向, 角度是按照順時針旋轉*/
? ? ? ? ? ? /*background-image: linear-gradient(200deg, red, blue);*/
? ? ? ? ? ? /*30%以前不漸變, 從30%開始慢慢漸變到下一個顏色*/
? ? ? ? ? ? /*background-image: linear-gradient(red 30%, blue);*/
? ? ? ? ? ? /*background-image: linear-gradient(red 0%, red 30%,blue 30%, blue 60%, green 60%, green 100%);*/
? ? ? ? ? ? background-image: linear-gradient(to left ,red 0%, red 30%,blue 30%, blue 60%, green 60%, green 100%);
徑向漸變
/*可以在顏色前面添加at和關鍵字來指定從什么位置開始漸變*/
? ? ? ? ? ? /*background-image: radial-gradient(at left top,red, blue);*/
? ? ? ? ? ? /*除了可以通過關鍵字指定從什么位置開始漸變以外, 還可以通過指定具體像素來指定從什么位置開始漸變*/
? ? ? ? ? ? /*background-image: radial-gradient(at 50px 50px,red, blue);*/
? ? ? ? ? ? /*也可以在顏色前面直接加上一個具體的像素來指定漸變的范圍*/
? ? ? ? ? ? /*background-image: radial-gradient(150px ,red, blue);*/
? ? ? ? ? ? /*
? ? ? ? ? ? 編寫規(guī)范:
? ? ? ? ? ? 如果既要指定擴散的范圍, 又要指定起始位置, 那么把擴散的范圍寫在前面, 而起始位置寫在后面
? ? ? ? ? ? */
? ? ? ? ? ? background-image: radial-gradient(50px at right bottom ,red, blue);
