Inset CSS Box Shadow — كود جاهز
أنشئ تعليمات برمجية لظل مربع CSS بشكل مرئي: أشرطة تمرير للإزاحة والتمويه والانتشار واللون مع العتامة والوضع الداخلي وما يصل إلى أربع طبقات مع معاينة مباشرة.
النتيجة
تفتح هذه الصفحة منشئ ظل المربع مع تحديد مربع الاختيار الداخلي بالفعل، بحيث يتم رسم الظل داخل العنصر بدلاً من خلفه. تعرض بطاقة المعاينة التأثير الغارق مرة واحدة، ويستمر كل شريط تمرير في تحديث خط CSS مباشرةً.
الظلال الداخلية هي الطريقة التي يقوم بها CSS بتزييف العمق نحو الداخل: تعتمد حالات الزر المضغوط وحقول البحث وآبار الإدخال وأحواض شريط التقدم واللوحات المحفورة عليها. نظرًا لأن الظل يعانق الحافة الداخلية، فإن التمويه والانتشار يتصرفان بشكل مختلف قليلاً عن الظل المسقط العادي - تتيح لك أشرطة التمرير هنا الشعور بهذا الاختلاف على الفور.
عندما يكون المظهر الغائر صحيحًا، انسخ خط ظل الصندوق في ورقة الأنماط الخاصة بك. يمكنك أيضًا دمج طبقة داخلية مع طبقات خارجية عادية - أضف طبقة ثانية وقم بإلغاء تحديد الطبقة الداخلية عليها لمزجهما في إعلان واحد.