خصوصیت box-shadow

مثال

این مثال برای عنصر div سایه قرار داده است:

div
{
box-shadow: 10px 10px 5px #888888;
}

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.

پشتیبانی مرورگرها

    

خاصیت box-shadow توسط مرورگرهای IE9+ ، Opera، Firefix، ChromeT Safari 5.1.1 پشتیبانی می شود.

تعریف و کاربرد

با استفاده از خاصیت box-shadow می تواین یک یا چند سایه به box داد.

مقدار پیشفرض none
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.boxShadow="10px 10px 5px #888888"

نحوه استفاده

box-shadow: h-shadow v-shadow blur spread color inset;

توجه: با استفاده از این خاصیت می توان یک یا چند سایه را به box داد. خاصیت یک لیستی از سایه هاست که با کاما از همدیگر جدا شده اند، و هر کدام با مقادیری با طول 2-4 مشخص شده اند، یک رنگ اختیاری دارند، و یک کلید واژه inset اختیاری نیز می گیرند.

مقدار توضیحات نمایش دادن
h-shadow

الزامی است. مکان سایه افقی را مشخص می کند. اعداد منفی نیز مجاز است.
v-shadow

الزامی است. مکان سایه عمودی را مشخص می کند. اعداد منفی نیز مجاز است.
blur

اختیاری است. میزان blur را مشخص می کند.
spread

اختیاری. سایز سایه را مشخص می کند.
color

اختیاری است. رنگ سایه را مشخص می کند. رنگ پیش فرض مشکی است.

نکته: در مرورگر Safari پارامتر رنگ الزامی است. اگر رنگ را مشخص نکنید، سایه به هیچ وجه نمایش داده نمی شود.
inset

اختیاری است. سایه را از سایه خارجی به سایه داخلی تغییر می دهد.