آموزش طراحی سایت (HTML CSS Javascript) | آتریا

خصوصیت box-shadow

مثال (خصوصیت 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	اختیاری است. سایه را از سایه خارجی به سایه داخلی تغییر می دهد.	نمایش دادن »

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

Images thrown on the table

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

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

CSS3 Border (بیاموز CSS3)

: نوشته شده توسط امیر پهلوان صادق; بازدید: 20189

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی