سبد (0)

خصوصیت box-shadow

مثال (خصوصیت box-shadow)

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

div
{
box-shadow: 10px 10px 5px #888888;
}
خودتان امتحان کنید »

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


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

Internet Explorer Firefox Opera Google Chrome Safari

خاصیت 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

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

نمایش دادن »

مثالs

مثال - خودتان امتحان کنید

Images thrown on the table

این مثال نحوه ایجاد تصاویر "polaroid" و چرخاندن تصاویر را نمایش می دهد.


بیاموزهای مرتبط

CSS3 Border (بیاموز CSS3)

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه