整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
<!--
* @Descripttion:
* @Author: voanit
* @Date: 2022-12-02 21:21:24
* @LastEditors: voanit
* @LastEditTime: 2022-12-02 21:45:57
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.gradient-text {
width: 800px;
font-size: 140px;
color: transparent;
background: -webkit-linear-gradient(360deg,red, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);
background-clip: text;
-webkit-background-clip: text;
/* -webkit-text-fill-color: transparent; */
/* background-size: auto; */
}
.gradient-text {
animation: gradientText 30s infinite linear;
-webkit-animation: gradientText 300s infinite linear;
}
@keyframes gradientText {
0% {
background-position: 0;
}
100% {
background-position: 8000px;
}}
</style>
</head>
<body>
<div class="gradient-text">web~前端</div>
</body>
</html>前篇章已經介紹過background-color背景色、background-image背景圖片的使用，在css 中還可以使用漸變作為背景，其控制和性能方面比使用實際圖像文件更好。如果你還不了解background(背景屬性)，可以先看看這篇文章：前端入門——css顏色和背景。
CSS 漸變通常是一種顏色淡入到另一種顏色，CSS 允許您控制漸變的方方面面，從方向、形狀再到顏色以及它們如何從一種顏色過渡到另一種顏色。實際上，漸變分為三種類型：
下面是基本語法：
/* 線性漸變 */
background-image: linear-gradient(#ff8a00, #e52e71);
background-image: linear-gradient(to right, violet, darkred, purple);
background-image: linear-gradient(40deg, rgb(255 0 0) 60%, orange);
/* 徑向漸變 */
background-image: radial-gradient(#ff8a00, #e52e71);
background-image: radial-gradient(circle at top right, #ff8a00, red, #e52e71);
/*圓錐漸變 */
background-image: conic-gradient(#ff8a00, #e52e71);
background-image: conic-gradient(red 50deg, yellow 100deg, lime 200deg, aqua, blue, magenta, red);效果如下：
下面是重復漸變：
/*重復漸變 */
background: repeating-linear-gradient(red, yellow 10%, green 15%);
background: repeating-radial-gradient(red, yellow 10%, green 15%)；線性重復漸變
徑向重復漸變
所有的 CSS 漸變類型都是一個顏色范圍。CSS 漸變產生的顏色可以隨位置不斷變化，從而產生平滑的顏色過渡。也可以創建純色帶和兩種顏色之間的硬過渡。以下內容適用于所有漸變函數：
無需局限于使用兩種顏色，你想使用多少種顏色都可以！ 默認情況下，所設置的顏色會均勻分布在漸變路徑中。
如下示例：
你可以通過給每個顏色設置 0，1% 或者 2% 或者其他的絕對數值來調整它們的位置。如果你將位置設置為百分數， 0% 表示起始點，而 100% 表示終點，但是如果需要的話你也可以設置這個范圍之外的其他值來達到你想要的效果。如果有些位置你沒有明確設置，那么它將會被自動計算，第一種顏色會在 0% 處停止，而最后一種顏色是 100%，至于其他顏色則是在它鄰近的兩種顏色的中間停止。
如下示例：
要在兩種顏色之間創建一條硬線，即創建一個條紋而不是逐漸過渡，可以將相鄰的顏色停止設置為相同的位置。在此示例中，兩種顏色在 50% 標記處共享一個顏色停止點，即漸變得一半：
默認情況下，漸變會平滑地從一種顏色過渡到另一種顏色。你可以通過設置一個值來將漸變的中心點移動到指定位置。 在如下示例中，我們將漸變的中心點由 50% 設為 10%。
以上內容，大概介紹了css 漸變所包含的知識點，下面將會分多篇文章來介紹每種漸變的使用方法，你可以關注我，繼續學習其它漸變知識。
其它相關文章：
參考資料：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients
https://css-tricks.com/a-complete-guide-to-css-gradients/
：測試瀏覽器版本號——chrome 75.0.3770.80；opera 60.0.3255.109；firefox 67.0；ie 11。
之前《CSS之圖片特殊用法》有講過不同用途的image屬性，漸變作為image的屬性值參與以上用途。下面主要講一講漸變的實際用法。
1 使用direction控制漸變方向
語法：
background-image: linear-gradient(to direction, color-1 percentage-1/length-1,color-2 percentage-2/length-2,...);
解釋說明：
以上圖為例，五種顏色將空間均分成四等份，其中五條分割線為各自顏色的中心線，以此為基準顏色漸變。
下面給出幾個具體案例
/*方向缺省，百分比缺省，漸變從上到下，五種顏色按規則漸變*/ background-image: linear-gradient(red, yellow,blue,orange,black); /*從左到右，按照百分比漸變*/ background-image: linear-gradient(to right, red 10%, yellow 30%,blue 70%,orange 90%,black); /*從左上到右下，按照具體像素漸變*/ background-image: linear-gradient(to bottom right, red 10px, yellow 150px,blue 170px,orange 200px,black);
2 使用angle控制漸變方向
語法：
background-image: linear-gradient(angle, color-1 percentage-1/length-1,color-2 percentage-2/length-2,...);
與上述（使用direction控制漸變方向）漸變方式唯一的區別就是該方法是使用角度（angle）控制方向，下圖可以看出其漸變規則。當角度為0deg時，漸變方向從下到上；當角度是90deg時，漸變方向從左到右。
徑向漸變由中心向外進行顏色漸變。
語法
background-image: radial-gradient(size shape, color-1 percentage-1/length-1, color-2 percentage-2/length-2, ...);
解釋說明：
語法
/*重復線性漸變*/ background-image: repeating-linear-gradient(to direction, color-1 percentage-1/length-1,color-2 percentage-2/length-2,...); /*重復徑向漸變*/ background-image: repeating-radial-gradient(size shape, color-1 percentage-1/length-1, color-2 percentage-2/length-2, ...);
解釋說明：
上面以背景為例講述了漸變的分類及實現，下面簡單擴展一下，講一講邊框的漸變，之前寫過一篇文章《CSS之圖片特殊用法》，里面有講到將圖片作為邊框的背景，漸變神色與上述情況類似，只需要將圖片地址改為漸變色就可以了，示例代碼如下
border-image: linear-gradient( blue ,green ,yellow ,black) 10;
同樣由《CSS之圖片特殊用法》可以延伸，要是字體顏色漸變，只需要將背景圖改為漸變色就可以了，具體代碼如下：
background-image:radial-gradient( blue 10px,green 20px,yellow ,black); background-clip: text; -webkit-background-clip: text; /*兼容chrome*/ color: transparent;
注：background-clip有兼容性問題，此需要根據瀏覽器不同使用不同的代碼；text屬性值目前是實驗性值，且其在ie中無效，不建議在生產環境中使用。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
