درس تعليمي عن استخدام خاصية 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 بسيط للاختبار:

<أتش تي أم أل>
<الرأس>


<الجسم>



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

إم جي {
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
ظل الصندوق: 2px 2px 10px #06C;
}

(1). ظل منسدل، بدون إزاحة، حجم الظل 10 بكسل، بدون توسيع، اللون #06C
img{box-shadow:0 0 10px #06C;}

قيمة اللون هنا هي قيمة HEX، ويمكننا أيضًا استخدام قيمة RGBA. وتتمثل ميزة قيمة RGBA في أنها تحتوي على قيمة شفافية Alpha إضافية، ويمكنك التحكم في شفافية الظل.

img {box-shadow: 0 0 10px rgba(0, 255, 0, .5)}
(2) أضف امتدادًا بمقدار 20 بكسل إلى ما سبق
img{box-shadow:0 0 10px 20px #06C;}

(3) الظل الداخلي، بدون إزاحة، بحجم 10 بكسل، بدون توسيع، اللون #06C
img{box-shadow:inset 0 0 10px #06C;}

(4) تأثيرات الظل المتعددة
يمكن استخدام Box-shadow عدة مرات في نفس الوقت. فلنستخدم ظلًا بأربعة ألوان.

img{box-shadow:-10px 0 10px red, box-shadow:10px 0 10px blue,box-shadow:0 -10px 10px أصفر,box-shadow:0 10px 10px green}

(5) ترتيب استخدام سمات الظل المتعددة عند استخدام سمات ظل متعددة لنفس العنصر، يجب الانتباه إلى ترتيبها أولاً. على سبيل المثال، في الكود التالي، نكتب أولاً ظلًا أخضر بحجم 10 بكسل، ثم نكتب بحجم 10 بكسل ولكن ممتد بظل قدره 20 بكسل. والنتيجة هي: طبقة مظللة باللون الأخضر فوق طبقة مظللة باللون الأصفر.

img{box-shadow:0 0 10px أخضر;box-shadow:0 0 10px 20px أصفر}

لكن لو غيرنا الترتيب هكذا:

img {box-shadow:0 0 10px 20px أصفر،box-shadow:0 0 10px أخضر؛}

لن نتمكن من رؤية الطبقة المظللة باللون الأخضر مكتوبة لاحقًا لأنها مغطاة بالطبقة الصفراء المكتوبة أولاً وبنصف قطر أكبر.

4. دع IE يدعم أيضًا box-shadow
يستخدم IE نفسه مرشح الظل لتحقيق تأثيرات مماثلة، وهناك أيضًا بعض ملفات js و.htc hack التي يمكن أن تساعدك في تحقيق هذا التأثير في IE. لا يمكنني تجربتها جميعها، لذا أعرض هنا فقط ما استخدمته.

ie-css3.htc هو ملف htc يسمح لمتصفح IE بدعم بعض خصائص CSS3، وليس فقط box-shadow، ولكنه يسمح أيضًا لمتصفح IE الخاص بك بدعم سمة الزاوية المستديرة border-radius وسمة text-shadow text-shadow .

كيفية استخدامه: قم بتنزيله ووضعه في دليل الخادم الخاص بك

اكتب الكود التالي في الخاص بك:

في الجزء الأزرق، أدخل المحدد باستخدام سمة box-shadow، وفي الجزء الأخضر، أدخل المسار المطلق أو المسار النسبي لـ ie-css3.htc، وتأكد من إمكانية الوصول إليه.

ثم لا بأس. ولكن لا تزال هناك بعض الأشياء التي يجب ملاحظتها:

عند استخدام ملف htc هذا، طالما أن box-shadow أو -moz-box-shadow أو -webkit-box-shadow مكتوب في CSS الخاص بك، فسوف يعرضه IE.
عند استخدام ملف htc هذا، لا يمكنك كتابة box-shadow: 0 0 10px red؛ لكن box-shadow: 0px 0px 10px red؛ وإلا فسوف يفشل في IE.
شفافية ألفا في قيم RGBA غير مدعومة.
الظلال الداخلية الداخلية غير مدعومة.
توسيع الظل غير مدعوم.
سوف تظهر الظلال باللون الأسود فقط في IE، بغض النظر عن الألوان الأخرى التي قمت بتعيينها لها.
لذلك، يسمح هذا البرنامج النصي لـ IE فقط بدعم بعض قيم box-shadow. إذا كان لديك نصوص برمجية أفضل لاختراق IE، فيرجى ترك رسالة لمشاركتها.