ویژگی box-shadow در css

ویژگی box-shadow در css | ویژگی box-shadow | صفت box-shadow

ویژگی box-shadow در css | ویژگی box-shadow | صفت box-shadow

ویژگی box-shadow در css | ویژگی box-shadow در css

در این مقاله از سایت آموزی به بررسی و تحلیل ویژگی box – shadow در زبان CSS می پردازیم.

از ویژگی box – shadow برای اضافه کردن سایه به یک عنصر یا باکس استفاده می شود.

ویژگی box – shadow به عنوان یکی از خصوصیات جدید در CSS3 معرفی شده است.

از طریق این ویژگی جدید box – shadow تمام عناصر موجود در یک وبسایت می توانند سایه بگیرند.

مثال اول در مورد ویژگی باکس شدو در زبان CSS

خروجی کد در مرورگر اینترنتی

همانطور که در کد بالا مشاهده می کنید ویژگی box – shadow چهار مقدار گرفته است که در ادامه به بررسی تک تک این ویژگی ها می پردازیم.

۱- اولین مقدار فاصله سایه با باکس را در راستای محور X مشخص می کند.

که اگر این مقدار مثبت باشد سایه به سمت راست حرکت دارد و اگر منفی باشد سایه به سمت چپ حرکت می کند.

۲- دومین مقدار فاصله سایه با باکس را در راستای محور Y تعیین می کند.

که مقدار مثبت باعث حرکت سایه به سمت پایین و مقدار منفی باعث حرکت به سمت بالا می شود.

۳- مقدار سوم میزان مات شدن یا محو شدن سایه را تعیین می کند, که این مقدار اختیاری می باشد و اگر تعیین نشود مرورگر مقدار پیشفرض آن که صفر است را به سایه اعمال می کند. وقتی این مقدار صفر باشد لبه سایه کاملا واضح و تیز می شود و هر چه این مقدار بیشتر شود لبه سایه مات تر و محوتر می شود.

۴- و مقدار چهارم هم یک مقدار اختیاری است که اندازه سایه را مشخص می کند.

مقدار پیشفرض آن برابر صفر است به این معنی که سایه به اندازه خود باکس می باشد.

اگر مقدار آن مثبت باشد سایه از خود باکس بزرگتر می شود و اگر مقدار منفی بگیرد سایه از عنصر کوچک تر می شود.

ویژگی box-shadow در css | ویژگی box-shadow | صفت box-shadow

ویژگی box-shadow در css | ویژگی box-shadow در css | صفت box-shadow

مثال دوم در مورد ویژگی box – shadow در CSS

با اضافه کردن کلمه کلیدی inset به ویژگی box – shadow می توان سایه داخلی برای یک عنصر بوجود آورد:

خروجی کد در مرورگر اینترنتی

 می توان به یک عنصر چندین سایه اضافه کرد, که در این صورت اولین سایه در بالا و بقیه به ترتیب زیر آن قرار می گیرند. فقط کافی است سایه ها به وسیله ویرگول از هم جدا شوند به مثال زیر توجه کنید:

مثال دوم در مورد ویژگی box – shadow در CSS

ویژگی box-shadow در css | ویژگی box-shadow | صفت box-shadow – اختصاصی سایت آموزی

توسط | ۱۳۹۷/۶/۴ ،۱۰:۰۱:۱۳ +۰۰:۰۰ شهریور ۴ام, ۱۳۹۷|css دسته بندی ها|برچسب ها: , , , , |بدون دیدگاه

در باره نویسنده :

ثبت ديدگاه

ده − سه =