溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關css中顏色漸變的實現方法有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
！！注意IE9及之前的版本不支持漸變。Safari要加-webkit-的前綴，Opera要加-o-的前綴，Firefox要加-moz-的前綴！
一、Linear Gradients(線性漸變)-向下/向上/向左/向右/對角方向
1.向下代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>漸變學習</title>
<style>
div{
width:200px;
height:200px;
}
.gradient{
background:-webkit-linear-gradient(#8A2BE2,#DC143C);/*for safari5.1-6.0*/
background:-o-linear-gradient(#8A2BE2,#DC143C);/*Opera 11.1-12.0*/
background:-moz-linear-gradient(#8A2BE2,#DC143C);/*firefox 3.6-15*/
background:linear-gradient(#8A2BE2,#DC143C);/*標準語法，必須放在最后*/
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>運行效果：
2.向上，換向下漸變的兩個顏色順序即可。替換上面代碼運行結果為：
3.向左代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>漸變學習</title>
<style>
div{
width:200px;
height:200px;
}
.gradient{
background:-webkit-linear-gradient(left,#8A2BE2,#DC143C);/*for safari5.1-6.0*/
background:-o-linear-gradient(right,#8A2BE2,#DC143C);/*Opera 11.1-12.0*/
background:-moz-linear-gradient(right,#8A2BE2,#DC143C);/*firefox 3.6-15*/
background:linear-gradient(to right,#8A2BE2,#DC143C);/*標準語法*/
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>運行結果：
注意：從左到右漸變，標準寫法在向下漸變的括號內加上方向詞to right；其中safari5.1-6.0加left；Opera11.1-12和firefox3.6-15加right；按以上代碼中的瀏覽器順序（標準語法必須放在最后！！）可以速記為第一項寫從左開始，后面三項寫到右結束。
4.從右到左，在從左到右的漸變代碼上修改方向詞得到效果圖：
5.對角方向
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>漸變學習</title>
<style>
div{
width:200px;
height:200px;
}
.gradient{
background:-webkit-linear-gradient(left top,#8A2BE2,#DC143C);/*for safari5.1-6.0*/
background:-o-linear-gradient(bottom right,#8A2BE2,#DC143C);/*Opera 11.1-12.0*/
background:-moz-linear-gradient(bottom right,#8A2BE2,#DC143C);/*firefox 3.6-15*/
background:linear-gradient(to bottom right,#8A2BE2,#DC143C);/*標準語法*/
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>運行結果：
注意：方向詞寫法遵循上下左右的按瀏覽器順序第一項寫起始位置，后三項寫到達位置，第四項為標準項要加to；要注意的是左上left top 對應的到達項為bottom right。
二、角度漸變
1、以上上下左右對角漸變通通可以通過角度漸變寫出來。在表示顏色的括號第一項加上角度比如0deg,45deg,90deg,180deg等角度即可。
2、角度是指漸變方向和水平線之間的角度，逆時針方向計算，比如：0deg是指從下到上的漸變，90deg是指從左到右的漸變。
3、對于Chrome，Safari，Firefox等換算公式為90-x=y，X為標準度數。
三、多個顏色節點：即在表示方向顏色的括號里加多幾種顏色就好，寫法還是遵循以上先寫方向再寫顏色。
四、帶有透明度的漸變：即用rgba（0,0,0,0.2）表示顏色，其中0.2表示透明度。
五、重復的線性漸變：用repeating-linear-gradient（）函數，括號內每個顏色規定漸變比例。
六、Radial Gradient徑向漸變
1、徑向漸變：可以指定漸變的中心，形狀（圓形circle或橢圓），大小size（closest-side;farthest-side;closest-coner;farthest-corner）。默認中心為center，形狀為ellipse（橢圓），漸變大小是farthest-corner（到最遠角落）。語法：background：-radial-gradient(center,shape，size,start-color,...,last-clor)。
2、顏色節點不均勻分布的徑向漸變：即規定每個顏色不通的比例。
3、重復的徑向漸變：使用repeating-radial-gradient()函數。每個顏色設置比例。
關于css中顏色漸變的實現方法有哪些就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
