線性漸變(linear gradients)沿着一根軸線改變顏色，從起點到終點顏色進行順序漸變。
語法：
background:linear-gradient(direction,color-stop1,color-stop2,……);
1、線性漸變從上到下(默認)
語法
background:linear-gradient(color-stop1,color-stop2……);
實例
div {
width: 800px;
height: 500px;
margin: 0 auto;
background: -webkit-linear-gradient(red, blue);
/* Safari 5.1 - 6.0*/
background: -o-linear-gradient(red, blue);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue);
/* Firefox 3.6 - 15 */
background: linear-gradient(red, blue);
/* 標准的語法 */
}
2、線性漸變從左到右
語法：
background: -webkit-linear-gradient(begin-level begin-vertical,color-stop1,color-stop2,……);
/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(end-level end-vertical,color-stop1,color-stop2,……);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(end-level end-vertical,color-stop1,color-stop2,……);
/* Firefox 3.6 - 15 */
background: linear-gradient(to end-level end-vertical,color-stop1,color-stop2,……);
/*標准的語法*/
實例
div {
width: 800px;
height: 500px;
margin: 0 auto;
background: -webkit-linear-gradient(left, red, blue);
/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue);
/* Firefox 3.6 - 15 */
background: linear-gradient(to right, red, blue);
/* 標准的語法 */
}
3、線性漸變對角
語法
background: -webkit-linear-gradient(begin-level begin-vertical,color-stop1,color-stop2,……);
/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(end-level end-vertical,color-stop1,color-stop2,……);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(end-level end-vertical,color-stop1,color-stop2,……);
/* Firefox 3.6 - 15 */
background: linear-gradient(to end-level end-vertical,color-stop1,color-stop2,……);
/*標准的語法*/
小提示：線性漸變對角時關鍵字的順序無關緊要，“to left bottom”與“to bottom left”相同。
實例
div {
width: 800px;
height: 500px;
margin: 0 auto;
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 標准的語法 */
}
3-3編程練習
小伙伴們，我們學習了怎樣使用CSS3寫顏色的漸變效果，那么根據效果圖，寫出代碼，實現3中方式的漸變把!
效果圖如下：
任務
第一步：寫出html代碼(3個div元素)
第二部：給div元素設置CSS樣式(寬和高。三個元素在一行上)
第三部：給三個div元素設置相應的背景顏色
(1)第一個div元素是從上向下發生漸變，暗色由黃色變成紅色
(2)第二個div元素是從左到右發生漸變，顏色由黃色變為紅色
第三個div元素是從左上角到右下角發生漸變，顏色由紅色變為黃色
參考代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>background-clip</title>
<meta name='description' content='background-clip'>
<meta name='keywords' content='background-clip'>
<style>
/* 此處寫代碼 */
html,
body {
margin: 0;
padding: 0;
}
.container {
width: 1000px;
margin: 20px auto;
display: flex;
justify-content: space-between;
}
.font{
display:flex;
justify-content:center;
width: 200px;
}
div.item{
width: 200px;
height: 200px;
background: #ccc;
}
div.item:nth-child(1) {
background: linear-gradient(yellow, red);
}
div.item:nth-child(2) {
background: linear-gradient(to right,yellow, red);
}
div.item:nth-child(3) {
background: linear-gradient(to bottom right, red,yellow);
}
</style>
</head>
<body>
<!-- 此處寫代碼 -->
<div class='container'>
<div class='font'>上下方向漸變</div>
<div class='font'>左右方向漸變</div>
<div class='font'>對角線方向漸變</div>
</div>
<div class='container'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
</body>
</html>
4、線性漸變-使用角度
語法：
background:linear-gradient(angle,color-stop1,color-stop2,……);
角度說明
0deg創建一個從下到上的漸變，正角表示順時針旋轉，90deg創建一個從左到右的漸變。
實例
#grad {
background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(180deg, red, blue); /* 標准的語法 */
}
編程練習
小伙伴們，根據效果圖，補充代碼，實現元素的背景顏色在水平方向上發生漸變，其中：
(1)0%-20%處，顏色是紅色全透明
(2)20%-50%處，顏色是從白色漸變到紅色
(3)50%-90%處，顏色從紅色漸變到綠色，其中綠色的透明度是0.7
效果圖如下：
任務
給元素設置背景顏色漸變
(1)用角度表示法讓顏色在水平方向發生漸變
(2)水平方向的0%-20%處，漸變的顏色是紅色全透明
(3)水平方向的20%-50%處，漸變的顏色是紅色，顏色沒有透明度
(4)水平方向50%-90%處，漸變的顏色是綠色，透明度為0.7
參考代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>em</title>
<meta name='description' content='em'>
<meta name='keywords' content='em'>
<style>
/* 此處寫代碼 */
div {
width: 400px;
height: 400px;
border:1px solid red;
background:linear-gradient(90deg,rgba(255, 0, 0,0) 20%,rgba(255, 0, 0,1) 50%,rgba(0,255,0,0.7) 90%);
margin:0 auto;
}
</style>
</head>
<body>
<!-- 此處寫代碼 -->
<div></div>
</body>
</html>
5、線性漸變-重復漸變
語法：
background:repeating-linear-gradient(color1 length|percentage,color2 length|percentage,……);
實例
div {
background:repeating-linear-gradient(red,blue 20%);
}
3-9編程練習
小伙伴們，我們學習了CSS3現象漸變中的重復漸變，接下來，根據效果圖補充代碼，實現元素中多個彩虹的重復。
提示：彩虹的顏色，用英語單詞表達即可
效果圖如下
任務
給元素設置背景顏色重復漸變
(1)效果圖中的完整彩虹重復了最少3次，占據了元素的90%的位置，所以一個彩虹占據元素的比例是30%
(2)將一個彩虹的7個顏色，均攤到30%中，每個顏色的比重是5%，比如紅色占據的位置是0%，橙色占據的是5%，黃色占據的是10%，以此類推。
參考代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>em</title>
<meta name='description' content='em'>
<meta name='keywords' content='em'>
<style>
/* 此處寫代碼 */
div {
width: 400px;
height: 300px;
border:1px solid red;
background:repeating-linear-gradient(90deg,red 0%,orange 5%,yellow 10%,green 15%,blue 20%,indigo 25%,purple 30%);
margin:0 auto;
}
</style>
</head>
<body>
<!-- 此處寫代碼 -->
<div></div>
</body>
</html>