مدخلCSS: تدرج شعاعي للخلفية. Radial-gradient (): التدرج الشعاعي باستخدام توقفات لونية متعددة
يتم عرض التدرجات الشعاعية بشكل مختلف عن التدرجات الخطية. إذا كانت ألوان الألوان الخطية تقع بشكل عمودي على الخط الذي يحدد الاتجاه ، فإن الألوان الشعاعية تتباعد عن المركز المحدد ، ويمكن أن يتخذ التدرج شكل دائرة أو قطع ناقص.
لأبسط تدرج لوني ، ما عليك سوى تعيين الألوان:
الخلفية: الانحدار الشعاعي (ذهبي ، برتقالي) ؛
بشكل افتراضي ، يتم توسيط مركز التدرج ويكون التدرج بيضاوي الشكل:
بالإضافة إلى الألوان ، يمكن تشكيل التدرج ووضعه وحجمه. تتحد الخيارات وتتصرف بشكل أكثر تعقيدًا من التدرجات الخطية.
الاستمارة(شكل التدرج النهائي) يمكن أن يكون دائرة وقطع ناقص. الافتراضي هو القطع الناقص ، ويميل التدرج إلى شغل كل المساحة الحرة للعنصر ، وتمتد إذا لزم الأمر.
لكي يكون للتدرج شكل دائرة ، يجب تحديد ذلك بشكل صريح باستخدام الكلمة الأساسية للدائرة.
إذا لم يتم تحديد الشكل ، ولكن الحجم محدد - تحدد قيمة واحدة نصف قطر الدائرة ، وإذا كانت هناك قيمتان - فإن التدرج اللوني يحصل على شكل القطع الناقص. يتم تجاهل التحديد الصريح لشكل التدرج اللوني عند وجود الأبعاد.
موقعيحدد مكان وجوده مركزالانحدار. يتم استخدام نفس الكلمات الأساسية المستخدمة في التدرج الخطي ، ولكن مع البادئة: في الأعلى ، على اليمين ، في الأسفل ، على اليسار ، وفي الوسط هو الافتراضي.
يمكن أيضًا دمجها مع بعضها البعض لوضع التدرج على جانب معين ، على سبيل المثال: في أعلى اليمين - في الزاوية اليمنى العليا.
أدناه يمكنك أن ترى كيف تعمل الوظائف المختلفة:
كود المربع الأول:
الخلفية: تدرج نصف قطري (في أعلى اليسار ، أرجواني ، قرمزي ، برتقالي ، ذهبي) ؛
يمكنك أيضًا تعيين موضع التدرج الدقيق ، على سبيل المثال عند 20٪ 50٪ أو 10 بكسل 150 بكسل.
الحجميحدد أبعاد شكل التدرج النهائي. بالنسبة إلى التدرجات اللونية البيضاوية ، يمكن تحديد القيم كنسبة مئوية ؛ أما التدرجات اللونية المستديرة ، فلا يمكن تحديدها.
إذا تم إعطاء قيمة واحدة ، فإنها تعتبر نصف قطر التدرج الدائري. إذا تم تحديد قيمتين - الأولى تعتبر نصف القطر الأفقي للقطع الناقص ، والثانية - الرأسية.
فيما يلي أمثلة على التدرجات الدائرية والبيضاوية. يتم تحديد شكل الشكل من خلال الأبعاد المحددة:
يمكنك أيضًا استخدام الكلمات الرئيسية:
أقرب جانب - ينتهي التدرج عند حدود العنصر الأقرب إلى مركز التدرج. إذا كان شكلًا بيضاويًا ، فإن التدرج يلامس كل حدود العنصر. الجانب الأبعد - ينتهي التدرج عند الحد الأبعد للعنصر. إذا كان شكلًا بيضاويًا ، فإن التدرج يلامس كل حدود العنصر. الزاوية الأقرب - يتمدد شكل النهاية بحيث يمر عبر ركن العنصر الأقرب إلى مركز التدرج. إذا كان شكل الوجهة عبارة عن قطع ناقص ، فإن التدرج يتمدد لملء الشكل بالكامل. باستخدام هذه المعلمة ، يملأ التدرج اللوني الشكل بالكامل ، ويتجاوز جزئيًا حدوده. الزاوية الأبعد - تشبه الزاوية الأقرب ، باستثناء أن شكل النهاية يمر عبر الزاوية الأبعد من مركز التدرج اللوني. القيمة الافتراضية.
تمت إضافة موضع سفلي لبعض التدرجات بحيث يمكنك رؤية عمل الكود بشكل أفضل:
يمكن أيضًا أن يتكرر التدرج الشعاعي - وهذا هو تكرار التدرج الشعاعي.
عينة من الرموز:
الخلفية: تكرار التدرج الشعاعي (دائرة ، darkkhaki ، darkkhaki .5em ، شفاف .5em ، شفاف 1.5em) ؛
كما هو الحال مع التدرج الخطي ، لا يتم عرض التدرج اللوني المتكرر بدقة شديدة.
من خلال الجمع بين العديد من الخلفيات والمعلمات المختلفة ، يمكنك الحصول على أشياء مذهلة:
إذا كنت تستخدم وحدات نسبية (em ،٪) ، وليست مطلقة (px) عند إنشاء الأنماط ، فيمكن حينئذٍ تعديل حجم الأنماط الناتجة بسهولة عن طريق تغيير حجم الخط فقط.
عندما نتحدث عن التدرجات ، يجدر بنا أن نبدأ بحقيقة أن التدرجات هي بديل للصورة في CSS. هذه "طريقة رائعة للقول أن إنشاء تدرج في CSS يوفر للمتصفح إرشادات لرسم صورة على الشاشة بدلاً من أنت تزود المتصفح بعنوان URL المصدر لملف أنشأته في أحد تطبيقات تحرير الصور ، مثل Photoshop أو Sketch. إنها طريقة CSS أصلية للقيام بنفس الشيء في التعليمات البرمجية ، وعلى هذا النحو ، يتم تضمين التدرجات في قيم صورة CSS ومواصفات المحتوى المستبدل.
يمكنك أن ترى كيف يفترض هذا التدرج أن الشكل هو قطع ناقص. هذا لأن العنصر نفسه ليس مربعًا كاملاً. في هذه الحالة ، كان سيفترض دائرة بدلاً من ذلك. ذكي جدًا! إليك ما سيحدث إذا أعلنا صراحة أن الدائرة هي قيمة الشكل:
التدرج (صورة الخلفية: الانحدار الشعاعي (دائرة ، أصفر ، # f06d06) ؛)
لاحظ أن التدرج اللوني دائري ، لكنه يتلاشى فقط حتى لون النهاية على طول الحافة الأبعد. يمكننا الآن الإعلان صراحةً عن قيمة الموضع للتأكد من أن الخبو ينتهي بـ "الجانب الأقرب" من الشكل بدلاً من ذلك ، على النحو التالي:
التدرج (صورة الخلفية: الانحدار الشعاعي (دائرة أقرب جانب ، أصفر ، # f06d06) ؛)
القيم المحتملة هناك هي: الزاوية الأقرب ، الجانب الأقرب ، الزاوية الأبعد ، الجانب الأبعد. يمكنك التفكير في الأمر مثل: "أريد لهذا التدرج الشعاعي أن يتلاشى من نقطة المركز إلى __________ ، وفي كل مكان آخر يملأ لاستيعاب ذلك."
لا يجب أن يبدأ التدرج الشعاعي من المركز الافتراضي أيضًا ، يمكنك تحديد نقطة معينة باستخدام "عند ______" كجزء من المعلمة الأولى ، مثل:
التدرج (صورة الخلفية: الانحدار الشعاعي (الدائرة في أعلى اليمين ، الأصفر ، # f06d06) ؛)
سأجعل الأمر أكثر وضوحًا هنا بجعل المثال مربعًا وضبط نقطة توقف لونية:
دعم المتصفح
دعم المستعرض لـ radial-gradient () هو نفسه إلى حد كبير. الاستثناء هو إصدار قديم جدًا من Opera. عندما بدأوا في دعم التدرجات ، فهموا فقط خطي وليس نصف قطري.
ولكن على غرار التدرج الخطي () ، إذا كان دعم المستعرض الخاص بك يحتاج إلى التعمق بشكل كبير ، فقد تفكر في استخدام أو أداة مماثلة تتعامل مع بادئة البائع بدلاً من الاضطرار إلى إدارة هؤلاء بنفسك.
بيانات دعم هذا المتصفح من
يتم تخزين مصدر هذا المثال التفاعلي في مستودع GitHub. إذا كنت ترغب في المساهمة في مشروع الأمثلة التفاعلية ، فيرجى استنساخ https://github.com/mdn/interactive-examples وإرسال طلب سحب إلينا.
تكوين التدرج الشعاعي
يتم تعريف التدرج اللوني الشعاعي بواسطة a نقطة المركز، و شكل النهاية، واثنان أو أكثر نقاط توقف اللون.
لإنشاء تدرج سلس ، ترسم وظيفة التدرج الشعاعي () سلسلة من الأشكال متحدة المركز تشع من المركز إلى شكل النهاية(وربما أبعد). قد يكون شكل النهاية إما دائرة أو قطع ناقص.
يتم وضع نقاط التوقف اللوني على أ شعاع التدرج الظاهريالذي يمتد أفقيًا من المركز باتجاه اليمين. ترتبط مواضع التوقف اللوني القائمة على النسبة المئوية بالتقاطع بين شكل النهاية وشعاع التدرج اللوني ، والذي يمثل 100٪. كل شكل هو لون واحد يحدده اللون الموجود على شعاع التدرج الذي يتقاطع معه.
بناء الجملة
/ * تدرج في وسط الحاوية ، يبدأ باللون الأحمر ، ويتغير إلى اللون الأزرق ، وينتهي باللون الأخضر * / التدرج الشعاعي (دائرة في المركز ، أحمر 0 ، أزرق ، أخضر 100٪)قيم
(أو| الكلمة الرئيسية | وصف |
|---|---|
| أقرب جانب | يلتقي شكل نهاية التدرج مع جانب المربع الأقرب إلى مركزه (للدوائر) أو يلتقي كلا الجانبين الرأسي والأفقي الأقرب إلى المركز (للقطع الناقص). |
| أقرب ركن | يتم تغيير حجم شكل نهاية التدرج بحيث يلتقي تمامًا بأقرب ركن من المربع من مركزه. |
| أبعد جانب | مشابه للجانب الأقرب ، باستثناء أن شكل النهاية يكون بحجمه ليلائم جانب الصندوق الأبعد عن مركزه (أو الجانبين الرأسي والأفقي). |
| الزاوية الأبعد | القيمة الافتراضية ، يتم تغيير حجم شكل نهاية التدرج بحيث يتوافق تمامًا مع الزاوية الأبعد للمربع من مركزه. |
ملحوظة:تضمنت التطبيقات المبكرة لهذه الوظيفة كلمات رئيسية أخرى (تغطية واحتواء) كمرادفات للزاوية الأبعد القياسية والجانب الأقرب ، على التوالي. استخدم الكلمات الرئيسية القياسية فقط ، حيث إن بعض التطبيقات قد أسقطت بالفعل تلك المتغيرات القديمة.
النحو الرسمي
التدرج الشعاعي ([[دائرة ||لاحظ أن السلبية
أمثلة
تدرج بسيط
الانحدار الشعاعي (صورة الخلفية: تدرج شعاعي (سماوي 0٪ ، شفاف 20٪ ، سمك السلمون 40٪) ؛)
تدرج غير متمركز
الانحدار الشعاعي (العرض: 240 بكسل ؛ الارتفاع: 120 بكسل ؛)
التدرج الشعاعي (صورة الخلفية: التدرج الشعاعي (الزاوية الأبعد عند 40 بكسل 40 بكسل ، # f35 0٪ ، # 43e 100٪) ؛)
تحديد
| تخصيص | حالة | تعليق |
|---|---|---|
| وحدة صور CSS المستوى 3 تعريف "التدرجات الشعاعية ()" في تلك المواصفات. |
توصية المرشح | التعريف الأولي. |
التوافق المتصفح
يتم إنشاء جدول التوافق في هذه الصفحة من البيانات المنظمة. إذا كنت ترغب في المساهمة في البيانات ، يرجى مراجعة https://github.com/mdn/browser-compat-data وإرسال طلب سحب إلينا.
تحديث بيانات التوافق على جيثب
| سطح المكتب | متحرك | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| كروم | حافة | ثعلب النار | متصفح الانترنت | أوبرا | سفاري | عرض ويب Android | Chrome لنظام Android | Firefox لنظام Android | Opera لنظام Android | Safari على iOS | سامسونج إنترنت | |
| شعاعي التدرج () | دعم Chrome الكامل 26 الدعم الكامل 26 الدعم الكامل 13 بادئة بادئة | دعم الحافة الكاملة 12 | دعم Firefox الكامل 16 ملحوظات دعم كامل 16ملحوظات ملحوظات قبل إصدار Firefox 36 ، لم يتم تطبيق التدرجات اللونية على مساحة اللون المضاعفة مسبقًا ، مما أدى إلى ظهور ظلال من الرمادي بشكل غير متوقع عند استخدامه بشفافية. الدعم الكامل 3.6بادئة ملحوظات بادئةبادئة بادئةبادئة معاق بادئة | دعم IE الكامل 10 ملحوظات دعم كامل 10ملحوظات ملحوظات يدعم Internet Explorer 5.5 إلى 9.0 التدرجات اللونية عبر عامل تصفية خاص :. | دعم Opera الكامل 12.1 دعم كامل 12.1 لا يوجد دعم 11.6 - 15 بادئة بادئة دعم كامل 15بادئة بادئة تم التنفيذ ببادئة البائع: -webkit- | دعم Safari الكامل 6.1 الدعم الكامل 6.1 الدعم الكامل 5.1 بادئة ملحوظات بادئة - التدرج الشبكي (شعاعي ، ...) | WebView Android الدعم الكامل ≤37 الدعم الكامل ≤37 الدعم الكامل ≤37 بادئة بادئة تم التنفيذ ببادئة البائع: -webkit- | دعم Chrome Android الكامل 26 الدعم الكامل 26 الدعم الكامل 18 بادئة بادئة تم التنفيذ ببادئة البائع: -webkit- | دعم Firefox Android الكامل 16 ملحوظات دعم كامل 16ملحوظات ملحوظات قبل Firefox 36 ، لم يتم تطبيق التدرجات على مساحة اللون المضاعفة مسبقًا ، مما أدى إلى ظهور ظلال من الرمادي بشكل غير متوقع عند استخدامه بشفافية. دعم كامل 4بادئة ملحوظات بادئة تم التنفيذ ببادئة البائع: -moz- ملاحظات منذ Firefox 42 ، يمكن تعطيل إصدار التدرجات البادئة عن طريق تعيين layout.css.prefixes.gradients إلى false. الدعم الكامل 49بادئة بادئة تم التنفيذ ببادئة البائع: -webkit- الدعم الكامل 44بادئة معاق بادئة تم التنفيذ ببادئة البائع: -webkit- معطل من الإصدار 44: توجد هذه الميزة خلف تفضيل layout.css.prefixes.webkit (يجب ضبطه على true). لتغيير التفضيلات في Firefox ، قم بزيارة about: config. | دعم Opera Android الكامل 12.1 دعم كامل 12.1 لا يوجد دعم 12-14 بادئة بادئة تم التنفيذ ببادئة البائع: -o- الدعم الكامل 14بادئة بادئة تم التنفيذ ببادئة البائع: -webkit- | دعم Safari iOS الكامل 6.1 الدعم الكامل 6.1 الدعم الكامل 6 بادئة ملحوظات بادئة تم التنفيذ ببادئة البائع: -webkit- ملاحظات كان Safari 4 يدعم دالة تجريبية للتدرج (شعاعي ، ...). لا يزال بناء الجملة القديم هذا مدعومًا لأغراض التوافق. | دعم Samsung Internet Android الكامل 1.5 دعم كامل 1.5 دعم كامل 1.0 بادئة بادئة تم التنفيذ ببادئة البائع: -webkit- |
| في بناء الجملة | دعم الكروم الكامل 26 | دعم الحافة الكاملة 12 | دعم Firefox الكامل 16 ملحوظات دعم كامل 16ملحوظات ملحوظات قبل إصدار Firefox 36 ، لم يتم تطبيق التدرجات اللونية على مساحة اللون المضاعفة مسبقًا ، مما أدى إلى ظهور ظلال من الرمادي بشكل غير متوقع عند استخدامه بشفافية. دعم كامل 10بادئة ملحوظات بادئة تم التنفيذ ببادئة البائع: -moz- ملاحظات منذ Firefox 42 ، يمكن تعطيل إصدار التدرجات البادئة عن طريق تعيين layout.css.prefixes.gradients إلى false. الدعم الكامل 49بادئة بادئة تم التنفيذ ببادئة البائع: -webkit- الدعم الكامل 44بادئة معاق بادئة تم التنفيذ ببادئة البائع: -webkit- معطل من الإصدار 44: توجد هذه الميزة خلف تفضيل layout.css.prefixes.webkit (يجب ضبطه على true). لتغيير التفضيلات في Firefox ، قم بزيارة about: config. | دعم IE الكامل 10 | دعم Opera الكامل 15 دعم كامل 15 لا يوجد دعم 11.6 - 15 بادئة بادئة تم التنفيذ ببادئة البائع: -o- | سفاري لا يوجد دعم لا | دعم WebView Android الكامل ≤37 | دعم Chrome Android الكامل 26 | دعم Firefox Android الكامل 16 دعم كامل 16 دعم كامل 10 بادئة بادئة تم التنفيذ ببادئة البائع: -moz- | دعم Opera Android الكامل 14 دعم كامل 14 لا يوجد دعم 12-14 بادئة بادئة تم التنفيذ ببادئة البائع: -o- | Safari iOS لا يوجد دعم لا | دعم Samsung Internet Android الكامل 1.5 |
| توقفات اللون مزدوجة الموضع | دعم Chrome الكامل 71 | حافة الدعم الكامل 79 | دعم Firefox الكامل 64 | IE لا يوجد دعم لا | دعم Opera الكامل 58 | دعم Safari الكامل 12.1 | دعم WebView Android الكامل 71 | دعم Chrome Android الكامل 71 | دعم Firefox Android الكامل 64 | دعم Opera Android الكامل 50 | دعم Safari iOS الكامل 12.2 | دعم Samsung Internet Android الكامل 10.0 |
| تلميحات الاستيفاء / نقاط المنتصف المتدرجة | دعم الكروم الكامل 40 | حافة الدعم الكامل 79 | دعم Firefox الكامل 36 | IE لا يوجد دعم لا | دعم Opera الكامل 27 | دعم Safari الكامل 6.1.1 | دعم WebView Android الكامل 40 | دعم Chrome Android الكامل 40 | دعم Firefox Android الكامل 36 | دعم Opera Android الكامل 27 | دعم Safari iOS الكامل 6.1.1 | دعم Samsung Internet Android الكامل 4.0 |
أسطورة
دعم كاملدعم كامل لا دعملا يوجد دعم انظر ملاحظات التنفيذ. انظر ملاحظات التنفيذ. يجب على المستخدم تمكين هذه الميزة صراحة. يجب على المستخدم تمكين هذه الميزة صراحة. يتطلب بادئة بائع أو اسمًا مختلفًا للاستخدام.ملاحظات الكم CSS
اعتاد أبو بريص أن يكون لديه خطأ طويل الأمد حيث تعمل التدرجات الشعاعية مثل التدرج الشعاعي (دائرة ذهبية ، حمراء) ، على الرغم من أنه لا ينبغي لها ذلك بسبب الفاصلة المفقودة بين الدائرة والذهب. أيضًا ،
يمتد التدرج اللوني الشعاعي من نقطة مركز التدرج في جميع الاتجاهات في دائرة أو قطع ناقص (الشكل الافتراضي) ، مما يدل على الانتقال السلسمن ظل لون إلى آخر. يتم إنشاء التدرج اللوني الشعاعي باستخدام وظيفة التدرج الشعاعي (). تنشئ الوظيفة صورة تمثل تدرجًا نصف قطريًا بين ظلال اللون المحددة. بشكل افتراضي ، يتطابق حجم التدرج مع حجم العنصر الذي يتم تطبيقه عليه.
تأخذ الدالة radial-gradient () الوسيطات المفصولة بفواصل التالية:
- الوسيطة الأولى هي الكلمات الأساسية و / أو وحدات CSS التي تحدد الشكل النهائي ، والحجم ، وموضع البداية للتدرج. حجة اختيارية.
- قائمة مفصولة بفواصل مكونة من لونين أو أكثر ، كل لون يمكن أن يتبعه موضع توقف.
لا يتطلب التدرج الشعاعي الأبسط سوى وسيطتين لتحديد لون البداية والنهاية:
Div (صورة الخلفية: تدرج نصف قطري (سماوي ، نيلي) ؛ العرض: 400 بكسل ؛ الارتفاع: 100 بكسل ؛) جربه "
كما هو الحال مع التدرجات الخطية ، يمكن أن يتضمن التدرج الشعاعي قائمة بأكثر من لونين ، ويمكن تحديد موضع توقف لأي لون.
Div (العرض: 400 بكسل ؛ الارتفاع: 100 بكسل ؛ الهامش: 10 بكسل ؛) # واحد (صورة الخلفية: التدرج الشعاعي (سماوي ، أصفر ، نيلي ، أبيض) ؛) # اثنان (صورة الخلفية: تدرج نصف قطري (سماوي ، أصفر 10٪ نيلي 30٪ أبيض 50٪)؛) جربه "
يمكن تحديد شكل التدرج اللوني القطري باستخدام دائرة الكلمات الرئيسية والقطع الناقص ، وتحديد أحدهما ليكون الوسيطة الأولى:
Div (العرض: 400 بكسل ؛ الارتفاع: 100 بكسل ؛ الهامش: 10 بكسل ؛) # واحد (صورة الخلفية: التدرج الشعاعي (القطع الناقص ، السماوي ، النيلي) ؛) # اثنان (صورة الخلفية: الانحدار الشعاعي (دائرة ، سماوي ، نيلي) )؛) جربها "
بشكل افتراضي ، يضع المستعرض النقطة المركزية للتدرج الشعاعي في وسط العنصر. يمكن وضع مركز التدرج اللوني باستخدام الكلمة الأساسية at متبوعة بالكلمات الرئيسية (أعلى ، يسار ، يمين ، أسفل ، وسط) أو قيم في وحدات CSS محددة:
| المعنى | وصف |
|---|---|
| أعلى اليسار يسار المركز أسفل اليسار أعلى اليمين المركز الأيمن اسفل اليمين مركز القمة مركز المركز وسط القاع | إذا قمت بتحديد واحد فقط كلمة رئيسية، والثاني سيكون "المركز". |
| س٪ y٪ | القيمة الأولى هي الوضع الأفقي ، والقيمة الثانية هي القيمة الرأسية. الزاوية اليسرى العلوية هي موضع 0٪ 0٪. الزاوية اليمنى السفلية هي الموضع 100٪ 100٪. إذا حددت قيمة واحدة فقط ، فستكون القيمة الأخرى 50٪. |
| x-pos y-pos | القيمة الأولى هي الوضع الأفقي ، والثانية هي القيمة الرأسية. الزاوية اليسرى العلوية هي الموضع 0 0. يمكن أن تكون الوحدات بكسل (0 بكسل 0 بكسل) أو أي وحدة قياس CSS أخرى. إذا حددت قيمة واحدة فقط ، فستكون القيمة الأخرى 50٪. يمكنك مزج ٪ والوحدات. |
يتم تحديد موضع التدرج قبل قيم تدرج اللون ، ولكن بعد الكلمة الأساسية التي تحدد شكل التدرج اللوني (إذا تم تحديده):
Div (العرض: 400 بكسل ؛ الارتفاع: 100 بكسل ؛ الهامش: 10 بكسل ؛) # واحد (صورة الخلفية: التدرج الشعاعي (على اليمين ، سماوي ، نيلي) ؛) # اثنان (صورة الخلفية: التدرج الشعاعي (دائرة عند 300 بكسل 50 بكسل ، سماوي ، نيلي ، أصفر) ؛) # ثلاثة (صورة الخلفية: تدرج نصف قطري (الدائرة في أعلى اليسار ، سماوي ، نيلي ، أصفر) ؛) جربها "
يمكن تحديد حجم التدرج اللوني (حجم الشكل النهائي للتدرج) باستخدام واحدة من أربع عبارات رئيسية أو عن طريق تحديد نصف القطر باستخدام وحدات CSS (لا يمكنك استخدام النسب المئوية لتحديد نصف القطر).
| الكلمات الدالة | وصف | |
|---|---|---|
| يعتمد الحجم النهائي للتدرج اللوني على المسافة بين مركز التدرج وأقرب جانب من العنصر (بالنسبة للدائرة) أو المسافة بين المركز وجانبي العنصر الأقرب إليه (بالنسبة للقطع الناقص). | ||
| يعتمد الحجم النهائي للتدرج اللوني على المسافة بين مركز التدرج وزاوية العنصر الأقرب إليه. |
 |
|
| يعتمد الحجم النهائي للتدرج اللوني على المسافة بين مركز التدرج وأبعد جانب من العنصر (للدائرة) أو المسافة بين مركز التدرج والجانبين الأبعد عنه (بالنسبة للقطع الناقص). |
 |
|
| يعتمد الحجم النهائي للتدرج اللوني على المسافة بين مركز التدرج وزاوية العنصر الأبعد عنه. يتم استخدامه بشكل افتراضي لشكل دائرة أو قطع ناقص. |
 |
يتم تحديد الكلمات الأساسية التي تحدد حجم التدرج أو نصف القطر قبل الكلمة الأساسية التي تحدد الشكل أو بعدها ، ودائمًا قبل تحديد الموضع.
Div (العرض: 400 بكسل ؛ الارتفاع: 100 بكسل ؛ الهامش: 10 بكسل ؛) # واحد (صورة الخلفية: التدرج الشعاعي (دائرة أقرب زاوية عند 100 بكسل ، سماوي 50٪ ، نيلي) ؛) # اثنان (صورة الخلفية: شعاعي- التدرج (دائرة أقرب جانب ، سماوي ، أحمر ، نيلي) ؛) # ثلاثة (صورة الخلفية: تدرج نصف قطري (دائرة 100 بكسل عند 200 بكسل ، سماوي 50٪ ، نيلي) ؛) # أربعة (صورة الخلفية: الانحدار الشعاعي ( قطع ناقص 170 بكسل 50 بكسل بحجم 175 بكسل ، سماوي ، # 90EE90 ، rgba (172،160،160،0)) ؛)
أرز. 1. التدرج الشعاعي والخطي
يتم إنشاء تدرج شعاعي باستخدام خاصية background أو background-image.
بناء الجملة
صورة الخلفية: تدرج نصف قطري ([دائرة ||<радиус>] [في<позиция>]؟ ، | [القطع الناقص || [<радиус> | <проценты>] (2)] [في<позиция>]؟ ، | [[دائرة | القطع الناقص] ||<размер>] [في<позиция>]؟ ، | في<позиция> , <цвет> [ , <цвет> ]*)
التعيينات
| وصف | مثال | |
|---|---|---|
| <тип> | يشير إلى نوع القيمة. | <размер> |
| أ && ب | يجب عرض القيم بالترتيب الموضح. | <размер> && <цвет> |
| أ | ب | يشير إلى أنه يجب تحديد قيمة واحدة فقط من القيم المقترحة (أ أو ب). | عادي | أحرف صغيرة |
| أ || ب | يمكن استخدام كل قيمة بمفردها أو بالاشتراك مع قيم أخرى بأي ترتيب. | العرض || عدد |
| قيم المجموعات. | [اقتصاص || تعبر] | |
| * | كرر صفر مرة أو أكثر. | [,<время>]* |
| + | كرر مرة واحدة أو أكثر. | <число>+ |
| ? | النوع أو الكلمة أو المجموعة المحددة اختيارية. | أقحم؟ |
| (أ ، ب) | كرر على الأقل أ ، لكن ليس أكثر من ب مرة. | <радиус>{1,4} |
| # | كرر مرة واحدة أو أكثر ، مفصولة بفواصل. | <время># |
القيم
دائرة انحدار نصف قطري لشكل دائري. القطع الناقص ينشئ تدرجًا بيضاويًا. يتم تعيين هذا النموذج بشكل افتراضي.<радиус>نصف قطر التدرج ، بالوحدات المتاحة لـ CSS. تشير قيمة واحدة إلى نصف قطر الدائرة ، بينما تشير قيمتان إلى نصف قطر القطع الناقص على طول المحور x ونصف قطره على طول المحور y. إذا لم يتم تحديد نصف قطر بشكل صريح ، فسيملأ التدرج الخلفية الكاملة للعنصر.<позиция>
يحدد نقطة البداية حيث نشأ التدرج اللوني. تتم كتابة موضع النقطة بشكل مشابه لقيم موضع الخلفية باستخدام الكلمات الأساسية أو الوحدات المتاحة مثل البكسل أو النسب المئوية ؛ أدناه هي المجموعات الممكنة.
- أعلى اليسار = أعلى اليسار = 0٪ 0٪ (في الزاوية اليسرى العليا) ؛
- أعلى = المركز العلوي = مركز القمة = 50٪ 0٪ (قمة الوسط) ؛
- أعلى اليمين = أعلى اليمين = 100٪ 0٪ (في الزاوية اليمنى العليا) ؛
- اليسار = المركز الأيسر = الوسط الأيسر = 0٪ 50٪ (اليسار والوسط) ؛
- المركز = المركز = 50٪ 50٪ (الوسط) هو الافتراضي ؛
- يمين = مركز يمين = مركز يمين = 100٪ 50٪ (يمين وتوسط) ؛
- أسفل اليسار = أسفل اليسار = 0٪ 100٪ (في الزاوية اليسرى السفلية) ؛
- أسفل = مركز القاع = مركز القاع = 50٪ 100٪ (مركز القاع) ؛
- أسفل اليمين = القاع الأيمن = 100٪ 100٪ (في الركن الأيمن السفلي).
| المعنى | الشفرة | وصف | رأي |
|---|---|---|---|
| أقرب جانب | الخلفية: الانحدار الشعاعي (الدائرة الأقرب عند 30 بكسل 20 بكسل ، #fff ، # 000) ؛ الخلفية: الانحدار الشعاعي (أقرب جانب عند 30 بكسل 20 بكسل ، #fff ، # 000) ؛ | يتزامن التدرج اللوني مع أقرب جانب من الكتلة (لدائرة) أو يتزامن في نفس الوقت مع أقرب جوانب أفقية ورأسية (للقطع الناقص). |  |
الخلفية: التدرج الشعاعي (الدائرة الأقرب عند 30 بكسل 20 بكسل ، #fff ، # 000) ؛ الخلفية: التدرج الشعاعي (أقرب زاوية عند 30 بكسل 20 بكسل ، #fff ، # 000) ؛ | يتم حساب شكل التدرج اللوني بناءً على معلومات المسافة إلى الزاوية الأقرب للكتلة. |  |
|
الخلفية: الانحدار الشعاعي (الدائرة الأبعد عند 30 بكسل 20 بكسل ، #fff ، # 000) ؛ الخلفية: الانحدار الشعاعي (الجانب الأبعد عند 30 بكسل 20 بكسل ، #fff ، # 000) ؛ | مشابه في التأثير للجانب الأقرب ، لكن التدرج يمتد إلى الجانب البعيد من الصندوق. |  |
|
| الزاوية الأبعد | الخلفية: الانحدار الشعاعي (الدائرة الأبعد عند 30 بكسل 20 بكسل ، #fff ، # 000) ؛ الخلفية: الانحدار الشعاعي (الزاوية الأبعد عند 30 بكسل 20 بكسل ، #fff ، # 000) ؛ | يتم حساب شكل التدرج بناءً على معلومات المسافة إلى الزاوية البعيدة للكتلة ، |  |
مثال
تظهر نتيجة هذا المثال أدناه.
ملحوظة
Chrome قبل 26 ، Safari قبل 6.1 و Android قبل 4.4 يدعم -webkit-radial-gradient ().
يدعم Opera السابق للإصدار 12.10 -o-radial-gradient ().
يدعم Firefox حتى الإصدار 16 -moz-radial-gradient ().
لا تستخدم جميع الخصائص المسبوقة الكلمة الأساسية at عند تحديد موضع نقطة البداية للتدرج.
تخصيص
تمر كل مواصفة بعدة مراحل من الموافقة.
- توصية - تمت الموافقة على هذه المواصفات من قبل W3C ويوصى بها كمعيار.
- توصية المرشح ( توصية ممكنة) - اقتنعت المجموعة المسؤولة عن المعيار بأنه يتماشى مع أهدافها ، لكن مساعدة مجتمع المطورين مطلوبة لتنفيذ المعيار.
- التوصية المقترحة ( التوصية المقترحة) - في هذه المرحلة ، يتم تقديم الوثيقة إلى المجلس الاستشاري W3C للموافقة النهائية.
- مسودة العمل - نسخة أكثر نضجًا من المسودة بعد المناقشة والتعديلات لمراجعة المجتمع.
- مسودة المحرر ( مسودة تحريرية) - نسخة مسودة من المواصفة القياسية بعد تحريرها من قبل محرري المشروع.
- مشروع ( مشروع المواصفات) هي المسودة الأولى للمعيار.