English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

دليل CSS

قواعد CSS (RULES)

كامل قائمة الخاصيات في CSS

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

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

وظائف CSS

مثال آنلاين

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>دليل الأساسيات(oldtoolbag.com)</title>　
<style>
#grad1 {
　　height: 200px;
　　background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
</style>
</head>
<body>
<h3>التدرج الراديالي المكرر</h3>
<div id="grad1"></div>
<p><strong>تنبيه:</strong>  لا يدعم  Explorer 9 و الأحدث منه التدرج التدرجي.</p>
</body>
</html>
اختبار لمعرفة ‹/›

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

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

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

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

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

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

دالة




repeating-radial-gradient()26.0
10.0　-webkit-		10.016.0
3.6　-moz-		6.1
5.1　-webkit-		12.1
11.1　-o-

قواعد اللغة CSS

background-image:　repeating-radial-gradient(shape　size　at　position,　start-color,　...,　last-color);
القيمةالوصف
shapeتحديد شكل التدرج. يمكن أن يكون:

  • ellipse (الافتراضي): يحدد التدرج المتناوب من شكل بيضاوي

  • circle: يحدد التدرج المتناوب من نصف دائرة

sizeموقع التمييز حول الحافة. يمكن أن تكون واحدة من القيم التالية:

  • farthest-corner (الافتراضي): يحدد طول نصف دائرة التدرج من مركز الدائرة إلى الزاوية الأقرب من المركز.

  • closest-side: يحدد طول نصف دائرة التدرج من مركز الدائرة إلى الجانب الأقرب من المركز.

  • closest-corner: يحدد طول نصف دائرة التدرج من مركز الدائرة إلى الزاوية الأقرب من المركز.

  • farthest-side: عكس closest-side، يحدد طول نصف دائرة التدرج من مركز الدائرة إلى الجانب الأقرب من المركز.

الوضعموقع الوسط، مشابه لـ on و background-position أو transform-origin. الافتراضي هو "center"
start-color, ..., last-colorلتحديد ألوان البداية والنهاية للتدرج، يمكنك استخدام قيم المسافة أو النسبة المئوية لتعيين موقع الألوان، ولكن لا يسمح بالقيم السلبية.

دليل CSS: تدرج CSS3

وظائف CSS

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