演示代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="reset.css"/>
<style type="text/css">
.box{
width: 1000px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
/* 以下演示从左到右重复线性渐变,重复2次 */
/* 重复渐变最后一个颜色必须设置百分比,表示 占整个元素尺寸的百分比 */
/* 通过最后一个百分比,可以计算重复次数 */
/* background: repeating-linear-gradient(90deg,red,green,blue 50%); */
/* background: repeating-linear-gradient(90deg,red,green 30%,blue 50%); */
background: repeating-radial-gradient(circle,red,green,blue 50%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>