生活随笔
收集整理的這篇文章主要介紹了
CSS渐变
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
- 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渐变的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
