درس تعليمي عن استخدام خاصية box-shadow في CSS3

تتيح لنا خاصية box-shadow في CSS3 تحقيق تأثيرات ظل الطبقة بسهولة. دعونا نشرح هذه السمة بالتفصيل في الممارسة العملية.

1. توافق المتصفح مع سمة box-shadow

دعونا نلقي نظرة أولاً على توافق المتصفح مع هذه السمة:

• Opera: لا أعرف الإصدار الذي بدأ يدعمه عندما نشرت هذه المقالة للاختبار، قمت للتو بتحديث Opera إلى الإصدار الأحدث 10.53، والذي يدعم بالفعل سمة box-shadow.
• يدعم Firefox هذا من خلال الملكية الخاصة -moz-box-shadow .
• يدعم Safari وChrome هذا عبر الخاصية الخاصة -webkit-box-shadow .
• غير مدعوم من قبل جميع IEs (لا أعرف ما إذا كان IE9 قد تحسن). لا تقلق، سنقدم لك بعض Hacks for IE في نهاية المقالة.

2. بناء جملة سمة مربع الظل

يحتوي box-shadow على ست قيم قابلة للتعيين:

img{box-shadow: نوع الظل إزاحة المحور X إزاحة المحور Y حجم الظل امتداد الظل لون الظل}

• عند عدم تعيين أي نوع ظل، يكون التأثير الافتراضي هو تأثير الظل. عند ضبطه على الشكل الداخلي، يكون تأثير الظل الداخلي.
• إزاحة المحور السيني والمحور الصادي ليست متكافئة ولكنها تشبه "الزاوية" و"الموضع" في الفوتوشوب.
• حجم الظل والامتداد واللون هو نفسه الموجود في Photoshop.

  3. تحليل المثال

  دعونا نلقي نظرة على تأثير ظل الصندوق من خلال عدة أمثلة أولاً، قم بعمل HTML بسيط للاختبار:

  <أتش تي أم أل>
  <الرأس>
  <style type="text/css">اكتب جزء CSS هنا</style>
  </الرأس>
  <الجسم>
  <img src="test.jpg" />
  </الجسم>
  </html>

  يرجى ملاحظة : لتوفير المتاعب، تتم كتابة box-shadow فقط في كود CSS أدناه، وفي الاستخدام الفعلي، يجب عليك أيضًا كتابة -moz-box-shadow و-webkit-shadow. ما عليك القيام به هو أمر بسيط للغاية، قم بنسخ مربعي الظل وإضافة -moz- و -webkit- أمامهما.

  img {
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
box-shadow:2px 2px 10px #06C;
}