مثال واحد للوظيفة CSS repeating-linear-gradient() - محرر عبر الإنترنت (oldtoolbag.com)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>تعليميات الأساس(oldtoolbag.com)</title> 
<style>
#grad1 {
  height: 200px;
  background-color: red; /* لا يدعم المتصفح العرض عند عدم الدعم */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%); 
}
#grad2 {
  height: 200px;
  background-color: red; /* لا يدعم المتصفح العرض عند عدم الدعم */
  background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%); 
}
#grad3 {
  height: 200px;
  background-color: red; /* لا يدعم المتصفح العرض عند عدم الدعم */
  background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%); 
}
#grad4 {
  height: 200px;
  background-color: red; /* لا يدعم المتصفح العرض عند عدم الدعم */
  background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%); 
}
</style>
</head>
<body>
<h1>التدرج الخطي المكرر</h1>
<div id="grad1"></div>
<p>45درجة:</p>
<div id="grad2"></div>
<p>190درجة:</p>
<div id="grad3"></div>
<p>90درجة:</p>
<div id="grad4"></div>
<p><strong>ملاحظة:</strong> لا يدعم متصفح Internet Explorer 9 وأولى إصدارات IE التدرج الخطي.</p>
</body>
</html>