انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #4 من درس: حدود قص الخلفية background-clip في لغة CSS

Clip Content Box Inner Highlight حصر طلاء الخلفية بمنطقة المحتوى

أتقن خاصية حدود قص الخلفية background-clip في لغة CSS للتحكم بامتداد لون الخلفية أو صورتها تحت الإطار أو إيقافها عند حدود الحشوة أو حصرها داخل منطقة المحتوى فقط.
4 صفوف تعليمية
لغة CSS
3,119 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يحصر التصريح background-clip: content-box طلاء لون الخلفية وصورتها داخل مستطيل المحتوى الداخلي فقط، مع إبقاء حلقة الحشوة المحيطة padding مفرغة بلا لون؛ مما ينتج إطاراً داخلياً أنيقاً يشبه البراويز الفنية بعنصر HTML واحد دون الحاجة لإضافة حاويات إضافية:

الصف 2 كود برمجي
CSS 
.framed-card {
  padding: 18px;
  border: 3px solid #5b3894;
  background-color: #f2ebf9;
  background-clip: content-box;
}
جرّب بنفسك
الصف 3 ملاحظة هامة
الصف 4 ملاحظة هامة

جميع فقرات هذا الدرس (حدود قص الخلفية background-clip في لغة CSS)