用線性漸變建立圖像。
- 如果想建立以對角線方式漸變的圖像，可以使用
to top left
-
1
2
3
4
5
6
示例代碼：
linear-gradient(#fff, #333);
linear-gradient(to bottom, #fff, #333);
linear-gradient(to top, #333, #fff);
linear-gradient(180deg, #fff, #333);
linear-gradient(to bottom, #fff 0%, #333 100%);
- demo代碼：
-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html zh-cmn-Hans"
>
<head>
<meta charset=
"utf-8"
/>
<title>linear-gradient()_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name=
"author"
content=
"Joy Du(飄零霧雨), [email protected], www.doyoe.com"
/>
<style>
div {
width: 200px;
height: 100px;
margin-top: 10px;
border: 1px solid #ddd;
}
.test {
background: linear-gradient(#fff, #333);
}
.test2 {
background: linear-gradient(#000, #f00 50%, #090);
}
.test3 {
background: linear-gradient(0deg, #000 20%, #f00 50%, #090 80%);
}
.test4 {
background: linear-gradient(45deg, #000, #f00 50%, #090);
}
.test5 {
background: linear-gradient(to top right, #000, #f00 50%, #090);
}
</style>
</head>
<body>
<div
class
=
"test"
></div>
<div
class
=
"test2"
></div>
<div
class
=
"test3"
></div>
<div
class
=
"test4"
></div>
<div
class
=
"test5"
></div>
</body>
</html>
-
- 運作結果
-
css3實作背景色漸變linear-gradient() 其中 background: linear-gradient(to right,#FFB95E ,#F35C70); 直接是兩種顔色的過度效果，運作結果如下圖所示： css3實作背景色漸變linear-gradient() 如果使用 background: -webkit-linear-gradient(to right,#FFB95E 15%,#FCA661 5%,#FCA362 5%,#FA8F66 25%,#F5736B 20%,#F35C70 30%);實作頁面的過度，則效果如下 css3實作背景色漸變linear-gradient() css3實作背景色漸變linear-gradient()