背景顏色的漸變設置--實現豐富多彩的背景效果

 

背景顏色的漸變

 

通過漸變可以設置一些復雜的背景顏色，可以實現從一個顏色向其他顏色過度的效果 漸變是圖片，需要通過background-image來設置  

 

 linear-gradient() 線性漸變：顏色沿着一條直線發生變化

 

例如：

 linear-gradient(orange,skyblue);    orange在頭，skyblue在結尾，中間是過渡區域  默認從上往下進行漸變

 

 

  background-image: linear-gradient(to right, orange,skyblue);  從左到右漸變

 

 

 

 -線性漸變的開頭，我們可以指定一個漸變方向

            to left          向左漸變

            to right       向右漸變

            to top         向上漸變

            to bottom   向下漸變

            xxxdeg   deg表示度數  向xx度漸變

            turn 表示圈                    向xx圈漸變

 

漸變可以同時指定多個顏色，多個顏色默認情況下平均分配

 background-image: linear-gradient(to right, orange ,skyblue ,pink);

也可以手動對顏色指定范圍進行調整

 

  background-image: linear-gradient(to right, orange 100px,skyblue 150px );  從左到右進行漸變 0-100px為orange色，150px-200px為skyblue色

 

 

實現漸變效果的重復  repeating-linear-gradient

 

 background-image: repeating-linear-gradient(skyblue 50px,pink 100px); 100-50=50px  所以漸變范圍為50px 從0-200px逐步平鋪展示（0-50 50-100 100-150 150-200） 

 

 

 

radial-gradient() 徑向漸變（太陽的效果）

 

background-image: radial-gradient(skyblue,yellow);

 

 

 

 默認情況下 徑向漸變圓心的形狀根據元素的形狀來計算

            元素為正方形對應的是圓形

            長方形對應的是橢圓形

            我們也可以手動指定徑向漸變的大小

 border-radius: 50%;

background-image: radial-gradient(100px 100px,skyblue,yellow);

 

也可以指定漸變的位置

background-image: radial-gradient(100px 100px at 80px 80px, skyblue,yellow);

 

 -語法：

               radial-gradient(大小 at 位置， 顏色1 位置1，顏色2 位置2)

               大小：circle  圓形

                    ellipse 橢圓形

                    closest-side 近邊

                    closest-corner 近角

                    farthes-side 遠邊

                    farthes-corner 遠角

                位置： top right left bottom center