شرح صفوف ومحتوى الفقرة
يخلط كثير من المتعلمين بين خاصيتي background-origin و background-clip لاشتراكهما في الكلمات المفتاحية الثلاث نفسها. والفرق الجوهري بسيط وحاسم: تحدد background-origin نقطة انطلاق تموضع الصورة فقط وقيمتها الافتراضية padding-box، بينما تحدد background-clip حدود قص وطلاء اللون والصورة معاً وقيمتها الافتراضية border-box:
| وجه المقارنة | خاصية background-origin | خاصية background-clip |
|---|---|---|
| الوظيفة الهندسية | نقطة بداية إحداثيات background-image | الحد الأقصى لقص طلاء اللون والصورة |
هل تؤثر في background-color؟ | لا، تخص الصور فقط | نعم، تقص الألوان والصور معاً |
| القيمة الافتراضية | padding-box | border-box |
في الاختصار background | الكلمة الصندوقية الأولى تضبط الأصل | الكلمة الصندوقية الثانية تضبط القص |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس ضبط حدود طلاء الخلفية عبر القيم الثلاث border-box و padding-box و content-box والتمييز الدقيق بين قص الخلفية ونقطة أصل تموضع الصورة. وفي الخطوة التالية سننتقل إلى درس الزوايا المدورة في لغة CSS لتشكيل منحنيات الأركان الفردية والبيضاوية باحترافية.