Box shadow در CSS

دسته بندی : آموزش CSS سطح مقاله : متوسط زمان مطالعه : 2 دقیقه آخرین بروز رسانی: 20 بهمن 1399

در این بخش با ویژگی Box shadow در CSS آشنا می شویم.

Box shadow در CSS چیست؟

با استفاده از خاصیت box-shadow ، می توانید جلوه سایه جعبه CSS را برای یک عنصر انتخاب شده اضافه کنید:

div {
    box-shadow: 15px 15px 10px #4286f4;
}

نحو جعبه سایه به شرح زیر است:

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

div {
  box-shadow: 14px 22px 10px red; 
}

	Description	Value
هیچ سایه جعبه CSS نمایش داده نمی شود.	Default	none
جابجایی افقی از یک مقدار مثبت برای سمت راست جعبه و یک مقدار منفی برای سمت چپ استفاده کنید.	Required	h‑shadow
افست عمودی. برای ناحیه زیر کادر از مقدار مثبت و برای مساحت بالای جعبه از مقدار منفی استفاده کنید.	Required	v‑shadow
سطح تاری 0 نشان دهنده سایه جعبه CSS واضح است. عدد بالاتر به معنای تاری بیشتر در یک منطقه بزرگتر است.	Required	blur
اندازه سایه جعبه CSS. برای اندازه بزرگتر از مقدار مثبت و برای اندازه کوچکتر از مقدار منفی استفاده کنید.	Optional	spread
رنگ سایه جعبه CSS. به طور پیش فرض سیاه است. با استفاده از نام های رنگ ، مقادیر RGB ، RGBA ، HEX ، HSL یا HSLA ، یک مورد خاص را مشخص کنید.	Optional	color

نکته: برای تغییر سایه CSS شروع به سایه داخلی می توانید از کلمه کلیدی inset استفاده کنید.

این تگ در مرورگرهای IE ، safari ، firefox، cherom، opera وEdge پشتیبانی می شود.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊