效果圖：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.cont {
width: 500px;
height: 200px;
background: linear-gradient(#78C9DC 70%, #0acfff 0%);
/*線性漸變*/
background-size: 100% 20px;
/*指定背景圖片的大小*/
}
.cont1 {
width: 500px;
height: 200px;
background: linear-gradient(to top right, #1E90FF 50%, #98FB98 50%);
background-size: 30px 30px;
}
.cont2 {
width: 500px;
height: 200px;
background: linear-gradient(-45deg, #0acf00 50%, #78C9DB 50%);
background-size: 30px 100%;
}
.cont3 {
width: 500px;
height: 200px;
background: repeating-linear-gradient(-45deg, #ADFF2F, #ADFF2F 15px, #D2691E 0, #D2691E 30px);
/*重複的線性漸變
第一個值爲定義漸變的角度方向。從0到360 默認180
*/
background-size: 30px 30px;
}
.cont4 {
width: 500px;
height: 200px;
background: #fff repeating-linear-gradient(30deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)15px, transparent 0, transparent 30px);
}
.cont5 {
width: 500px;
height: 200px;
background: #fff;
background: linear-gradient(90deg, rgba(100, 0, 0, .5) 50%, transparent 0), linear-gradient(rgba(100, 0, 0, .5) 50%, transparent 0);
background-size: 30px 30px;
}
.cont6 {
width: 500px;
height: 200px;
background: #C71585;
background-image: radial-gradient(#fff 30%, transparent 0), radial-gradient(#fff 30%, transparent 0);
/*徑向漸變*/
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
/*必須是background-size尺寸的1/2 */
}
.cont7 {
width: 500px;
height: 200px;
background: #fff;
background-image: linear-gradient(45deg, #FF7F50 26%, transparent 0, transparent 75%, #FF7F50 0), linear-gradient(45deg, #FF7F50 26%, transparent 0, transparent 75%, #FF7F50 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}
</style>
</head>
<body>
<h2>不等寬背景條紋</h2>
<div class="cont"></div>
<h2>瓷磚條紋</h2>
<div class="cont1"></div>
<h2>草地</h2>
<div class="cont2"> </div>
<h2>斜條紋</h2>
<div class="cont3"> </div>
<h2>單色斜條紋</h2>
<div class="cont4"></div>
<h2>格子衫條紋</h2>
<div class="cont5"></div>
<h2>波點條紋</h2>
<div class="cont6"></div>
<h2>棋盤背景</h2>
<div class="cont7"></div>
</body>
</html>