ظل مربع CSS
خاصية CSS box-shadow
تُستخدم خاصية CSS box-shadow
لتطبيق ظل واحد أو أكثر على عنصر.
حدد ظلًا أفقيًا وعموديًا
في أبسط استخدام لها ، يمكنك فقط تحديد الظل الأفقي والعمودي. اللون الافتراضي للظل هو لون النص الحالي.
عنصر <div> بظل مربع
مثال
حدد ظلًا أفقيًا وعموديًا:
div
{
box-shadow: 10px 10px;
}
حدد لونًا للظل
تحدد المعلمة color
لون الظل.
عنصر <div> بظل مربع رمادي
مثال
حدد لون الظل:
div
{
box-shadow: 10px 10px grey;
}
أضف تأثير التمويه إلى الظل
تحدد المعلمة blur
نصف قطر التمويه. كلما زاد الرقم ، زاد ضبابية الظل.
عنصر <div> بظل مربع رمادي غير واضح 5 بكسل
مثال
أضف تأثير تمويه إلى الظل:
div
{
box-shadow: 10px 10px 5px grey;
}
تعيين نصف قطر انتشار الظل
تحدد المعلمة spread
نصف قطر الانتشار. تزيد القيمة الموجبة من حجم الظل ، بينما تقلل القيمة السالبة من حجم الظل.
عنصر <div> بظل مربع رمادي غير واضح ، مع نصف قطر انتشار يبلغ 12 بكسل
مثال
اضبط نصف قطر انتشار الظل:
div
{
box-shadow: 10px 10px 5px 12px grey;
}
اضبط المعلمة الداخلية
تقوم inset
المعلمة بتغيير الظل من الظل الخارجي (البداية) إلى الظل الداخلي.
عنصر <div> به ظل مربع غير واضح ، رمادي ، داخلي
مثال
أضف المعلمة الداخلية:
div
{
box-shadow: 10px 10px 5px grey inset;
}
أضف العديد من الظلال
يمكن أن يحتوي العنصر أيضًا على ظلال متعددة:
مثال
div
{
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
البطاقات
يمكنك أيضًا استخدام box-shadow
الخاصية لإنشاء بطاقات تشبه الورق:
1
1 يناير 2021
هاردانجر ، النرويج
مثال
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
CSS Shadow Properties
The following table lists the CSS shadow properties:
Property | Description |
---|---|
box-shadow | Adds one or more shadows to an element |
text-shadow | Adds one or more shadows to a text |