انتقل إلى محتوى الدرس

Shadow Spread Radius Elevation نصف قطر الانتشار وتدرج الارتفاع

صمم عمقاً بصرياً واقعياً للبطاقات والأزرار عبر ظلال الصناديق في لغة CSS باستخدام الإزاحة والتمويه ونصف قطر الانتشار والظلال الغائرة وحلقات التركيز الدائرية دون التأثير في التخطيط.
2 صفوف تعليمية
لغة CSS
0 مشاهدة

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

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

يمثل الرقم الطولي الرابع معامل الانتشار spread-radius قبل تطبيق التمويه بصيغة offset-x offset-y blur-radius spread-radius color. توسع القيم الموجبة مساحة الظل من الجهات الأربع، بينما تعمل القيمة السالبة للانتشار مثل -8px على تقليص الظل وحصره أسفل البطاقة ليمنح إيحاءً احترافياً بارتفاع العنصر عن السطح دون تلويث الحافة العلوية بهالة رمادية.

الصف 2 كود برمجي
CSS
.card-elevated {
  padding: 20px;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 18px 26px -8px rgba(15, 23, 42, 0.22);
}