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

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

CSS repeating-conic-gradient() الوظيفة تستخدم لتكرار تدرج المخروطي.

مثال:

تدرج المخروطي تكرار تدرج المخروطي
conic-gradient(red, yellow); repeating-conic-gradient(red 10%, yellow 20%);

مثال

مثال 1

تدرج مخروطي مكرر

#grad {
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
}

تجربة بنفسك

مثال 2

تدرج مخروطي مكرر تم تعيين نقاط البداية والانتهاء للألوان

#grad {
  background-image: repeating-conic-gradient(red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

تجربة بنفسك

مثال 3

تدرج مخروطي مكرر آخر تم تعيين زاوية البداية وركز الموقع

#grad1 {
  background-image: repeating-conic-gradient(from 10deg at 30% 30%, red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

تجربة بنفسك

اللغة CSS

repeating-conic-gradient([from زاوية][at الموقع,] درجة الألوان, درجة الألوان, ... );
القيمة الوصف
من زاوية

اختياري. تدوير التدرج المخروطي بأكمله بناءً على هذا الزاوية

القيمة الافتراضية هي 0deg

at الموقع

اختياري. تحديد نقطة مركز التدرج المخروطي

القيمة الافتراضية هي center

درجة الألوان, ... , درجة الألوان

نقطة انتهاء الألوان هي اللون الذي تريد أن يتم استعراض التدرج السلس بينه

هذا القيمة تتكون من قيم الألوان وواحدة أو اثنتين من مواقع التوقف الاختيارية (زاوية بين 0 إلى 360 درجة أو نسبة بين 0% إلى 100%)

تفاصيل التقنية

الإصدار: CSS Images Module Level 4

دعم المتصفح

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

Chrome Edge Firefox Safari Opera
69 79 83 12.1 56

الصفحات ذات الصلة

دليل:التنقل CSS

المرجع:خصائص background-image CSS

المرجع:وظيفة CSS conic-gradient()

المرجع:وظيفة CSS linear-gradient()

المرجع:وظيفة CSS radial-gradient()

المرجع:دالة repeating-linear-gradient() في CSS

المرجع:وظيفة CSS repeating-radial-gradient()