菜鸟教程在线编辑器

AI 编程工具
 
                <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
#grad1 {
  height: 200px;
  background-image: repeating-linear-gradient(45deg,red,blue 7%,green 10%);
}

#grad2 {
  height: 200px;
  background-image: repeating-linear-gradient(190deg,red,blue 7%,green 10%);
}

#grad3 {
  height: 200px;
  background-image: repeating-linear-gradient(90deg,red,blue 7%,green 10%);
}
</style>
</head>

<body>
<h3>重复线性渐变</h3>

<p>45 度线性渐变，从红色到蓝色：</p>
<div id="grad1"></div>

<p>190 度线性渐变，从红色到蓝色：</p>
<div id="grad2"></div>

<p>90 度线性渐变，从红色到蓝色：</p>
<div id="grad3"></div>


<p><strong>注意：</strong> Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。</p>
</body>
</html>
              