دليل CSS Reference

CSS @RULES

كامل CSS Properties

وظيفة CSS repeating-linear-gradient()

وظيفة CSS repeating-linear-gradient() تقوم بإنشاء <image> يتكون من تدرجات خطية مكررة، وهي وظيفة مشابهة لـ linear-gradient وتستخدم نفس المعلمات، ولكنها تكرر التدرج في جميع الاتجاهات لغطاء كامل محتواه. نتائج هذه الوظيفة هي objekt نوع <gradient>، وهو نوع خاص من <image>.

وظائف CSS

مثال على الخطوط المتدرجة

التدرج الخطي المكرر:

مثال

<!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 وكل الإصدارات الأقدم تدرج الخطي.</p>
</body>
</html>

اختبار لرؤية ‹/›

التعريف والاستخدام

تستخدم دالة repeating-linear-gradient() لإنشاء "صورة" تدرج خطي مكرر.

الإصدارات المدعومة: CSS3

التوافق مع المتصفحات

الرقم في الجدول يمثل الإصدار الأول للبرنامج التشغيلي الذي يدعم هذه الدالة.

"webkit" أو "moz" أو "o" يعني الرقم الأول للإصدار الذي يدعم هذه الدالة.

دالة
repeating-linear-gradient()	26.0 10.0 -webkit-	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-

قواعد اللغة CSS

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

القيمة	وصف
زاوية	تعريف زاوية اتجاه التدرج. من 0 درجة إلى 360 درجة، الافتراضي هو 180 درجة.
side-or-corner	تحديد موقع البداية للتدرج الخطي. مكون من كلمتين: الأولى تحدد الموقع الأفقي (left أو right)، والثانية تحدد الموقع العمودي (top أوbottom). يمكن أن تكون الكلمتان متبادلتين، وكل منهما اختيارية.
color-stop1, color-stop2,...	تحديد الألوان البداية والنهاية للتدرج، مكونة من قيم الألوان ووقف الأماكن (اختياري، باستخدام النسب المئوية)。

مثال على الخطوط المتدرجة

تدرجات خطية مكررة مختلفة:

مثال

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>دليل أساسي(oldtoolbag.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 وأحدث إصداراته تدرج.</p>
</body>
</html>

اختبار لرؤية ‹/›

دليل CSS: تدرج CSS3

وظائف CSS

قاعدة CSS @charset وظائف CSS