• CSS3 定義了兩種類型的漸變（ gradients ）
  • 線性漸變（ Linear Gradients ）- 向下/向上/向左/向右/對角方向
  • 徑向漸變（ Radial Gradients ）- 由它們的中心定義
• 背景的漸變使用的屬性是：background-image

線性漸變

• 創建一個線性漸變，必須至少定義兩種顏色結點，顏色結點即你想要呈現平穩過渡的顏色
• 同時，你也可以設置一個起點和一個方向（或一個角度）
• 從上到下 ( 默認情況下 )
  • background-image: linear-gradient(red, blue);
• 可以添加方向詞改變漸變方向
  • 如果沒有帶瀏覽器前綴，需要在方向詞前面添加to
    • background-image: linear-gradient(to right, red , blue);
    • 從左到右，由紅色漸變到藍色
    • background-image: linear-gradient(to bottom right,blue,green,red);
    • 從左上到右下，由藍色漸變到綠色，再由綠色漸變到紅色
  • 帶瀏覽器前綴，不用加to
    • background-image: -webkit-linear-gradient(bottom,blue,green,red);
    • 從下到上，由藍色漸變到綠色，再由綠色漸變到紅色
    • background-image: -webkit-linear-gradient(top right,blue,green,red);
    • 從右上到左下
• 如果想要控制漸變的范圍，可以在顏色后面添加 %
  • background-image: linear-gradient(blue 50%,black 80%,green 90%);
  • 50% - 80%由藍色漸變到黑色，80% - 90%由黑色漸變到綠色
• 三色塊
  • background-image: linear-gradient(to left bottom,blue 33.33% ,green 33.33%,green 66.66%,pink 66.66%);
  • 兩兩寫，百分比一樣，這樣就不會出現漸變效果了
  • 33.33% blue到33.33% green，66.66% green到66.66% pink
• 默認的從上到下，不是 0deg的效果，是 180deg的效果
  • background-image: linear-gradient(180deg,blue 33.33% ,green 33.33%,green 66.66%,pink 66.66%); 從上到下，顏色依次是藍、綠、粉
  • background-image: linear-gradient(0deg,blue 33.33% ,green 33.33%,green 66.66%,pink 66.66%); 從下到上，顏色依次是藍、綠、粉
  • background-image: linear-gradient(45deg,blue 33.33% ,green 33.33%,green 66.66%,pink 66.66%); 45度漸變 ( 由左下角開始，漸變到右上角)
• 重復漸變
  • background-image: repeating-linear-gradient(to right,blue 50%,green 60%);
  • background-image: repeating-linear-gradient(to right,rgba(0, 0, 255, 0.096) 50%,rgba(0, 128, 0, 0.378) 60%);
• 多層漸變
  • background-image: linear-gradient(rgba(255, 0, 0, 0.255),rgba(0, 0, 255, 0.275)),linear-gradient(green,pink);
• 重復多層漸變
  • background-image: repeating-linear-gradient(to right,rgba(0, 0, 255, 0.096) 50%,rgba(0, 128, 0, 0.378) 60%),repeating-linear-gradient(red 40%,pink 60%);

徑向漸變

• 徑向漸變：帶有指定的角度的線性漸變，徑向漸變由它的中心定義
• 創建一個徑向漸變，必須至少定義兩種顏色結點，顏色結點即你想要呈現平穩過渡的顏色
• 同時，你也可以指定漸變的中心、形狀（原型或橢圓形）、大小
• 默認情況
  • 漸變的中心是 center（表示在中心點）
  • 漸變的形狀是 ellipse（表示橢圓形）
  • 漸變的大小是 farthest-corner（表示到最遠的角落）
• 徑向漸變 - 顏色結點均勻分布（默認情況下）
  • background-image: radial-gradient(red, green, blue);
• 徑向漸變 - 顏色結點不均勻分布
  • background-image: radial-gradient(red 30%,green 50%);
  • 30% - 50%由紅色漸變到綠色
• 設置形狀
  • shape 參數定義了形狀，它可以是值 circle 或 ellipse
  • circle 表示圓形，ellipse 表示橢圓形，默認值是 ellipse
  • background-image: radial-gradient(circle,red,green,blue);
  • background-image: radial-gradient(circle,red 50%,green 50%); 這樣就是只有紅色和綠色，沒有漸變效果了
• 修改圓心的位置，必須添加 at
  • background-image: radial-gradient(at left,red,green,blue,pink);
  • background-image: radial-gradient(at 20px -50px,red,green,blue);
• 重復漸變
  • background-image: repeating-radial-gradient(red 30%,green 50%);
• 多層漸變
  • background-image: repeating-linear-gradient(to right,rgba(0, 0, 255, 0.096) 50%,rgba(0, 128, 0, 0.378) 60%),repeating-radial-gradient(pink 30%,skyblue 50%);

總結

以上是生活随笔為你收集整理的CSS渐变的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。