溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“css3用Gradients實現線性漸變”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css3用Gradients實現線性漸變”吧！
代碼塊
html頁面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>css3 Gradients</title>
</head>
<body>
<div class="grad-repeating-lg">重復的線性漸變</div>
<div class="grad-rgba-0-1">從左邊開始的線性漸變。起點是完全透明，慢慢過渡到完全不透明的紅色</div>
<div class="grad-r-o-y-g-b-i-v">帶有彩虹顏色和文本的線性漸變</div>
<div class="grad-red-green-blue">帶有多個顏色結點的從上到下的線性漸變</div>
<div class="grad-45-deg">45角度的線性漸變</div>
<div class="grad-0-deg">0角度的線性漸變</div>
<div class="grad-90-deg">90角度的線性漸變</div>
<div class="grad-180-deg">180角度的線性漸變</div>
<div class="grad-FF69B4-2F4F4F">從右上角開始（到左下角）的線性漸變</div>
<div class="grad-008B8B-DEB887">從左上角開始（到右下角）的線性漸變</div>
<div class="grad-A52A2A-6495ED">從左邊開始的線性漸變。起點是#A52A2A，慢慢過渡到#6495ED</div>
<div class="grad-red-blue">從頂部開始的線性漸變。起點是紅色，慢慢過渡到藍色</div>
</body>
</html>
css樣式:
<style type="text/css" media="screen">
div{
width: 800px;
height: 600px;
padding: 20px;
margin:50px;
}
.grad-red-blue{
background:-webkit-linear-gradient(red,blue);
background:-o-linear-gradient(red,blue);
background:-moz-linear-gradient(red,blue);
background:linear-gradient(red,blue);
}
.grad-A52A2A-6495ED{
background:-webkit-linear-gradient(left,#A52A2A,#6495ED);
background:-o-linear-gradient(right,#A52A2A,#6495ED);
background:-moz-linear-gradient(right,#A52A2A,#6495ED);
background:linear-gradient(to right,#A52A2A,#6495ED);
}
.grad-008B8B-DEB887{
background:-webkit-linear-gradient(left top,#008B8B,#DEB887);
background:-o-linear-gradient(bottom right,#008B8B,#DEB887);
background:-moz-linear-gradient(bottom right,#008B8B,#DEB887);
background:linear-gradient(to bottom right,#008B8B,#DEB887);
}
.grad-FF69B4-2F4F4F{
background:-webkit-linear-gradient(right top,#FF69B4,#2F4F4F);
background:-o-linear-gradient(bottom left ,#FF69B4,#2F4F4F);
background:-moz-linear-gradient(bottom left,#FF69B4,#2F4F4F);
background:linear-gradient(to bottom left,#FF69B4,#2F4F4F);
}
.grad-180-deg{
background:-webkit-linear-gradient(180deg,#0ff,#B8860B);
background:-o-linear-gradient(180deg,#0ff,#B8860B);
background:-moz-linear-gradient(180deg,#0ff,#B8860B);
background:linear-gradient(180deg,#0ff,#B8860B);
}
.grad-90-deg{
background:-webkit-linear-gradient(90deg,#F0F8FF,#B8860B);
background:-o-linear-gradient(90deg,#F0F8FF,#B8860B);
background:-moz-linear-gradient(90deg,#F0F8FF,#B8860B);
background:linear-gradient(90deg,#F0F8FF,#B8860B);
}
.grad-0-deg{
background:-webkit-linear-gradient(0deg,#F0F8FF,#7FFFD4);
background:-o-linear-gradient(0deg,#F0F8FF,#7FFFD4);
background:-moz-linear-gradient(0deg,#F0F8FF,#7FFFD4);
background:linear-gradient(0deg,#F0F8FF,#7FFFD4);
}
.grad-45-deg{
background:-webkit-linear-gradient(30deg,red,blue);
background:-o-linear-gradient(30deg,red,blue);
background:-moz-linear-gradient(30deg,red,blue);
background:linear-gradient(30deg,red,blue);
}
.grad-red-green-blue{
background:-webkit-linear-gradient(red,green,blue);
background:-o-linear-gradient(red,green,blue);
background:-moz-linear-gradient(red,green,blue);
background:linear-gradient(red,green,blue);
}
.grad-r-o-y-g-b-i-v{
background:-webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background:-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background:-moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background:linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);
}
.grad-rgba-0-1{
background:-webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
background:-o-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
background:-moz-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
background:linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));
}
.grad-repeating-lg{
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1 - 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/* 標準的語法 */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
</style>感謝各位的閱讀，以上就是“css3用Gradients實現線性漸變”的內容了，經過本文的學習后，相信大家對css3用Gradients實現線性漸變這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
