CSS Box Shadow

property box-shadow CSS

CSS box-shadow ویژگی سایه را به عنصر اعمال می‌کند.

یکی از ساده‌ترین کاربردها این است که تنها سایه‌ی افقی و عمودی را مشخص کنید:

عنصر <div> زرد با سایه‌ی box-shadow سیاه

example

div {
  box-shadow: 10px 10px;
{}

به طور شخصی امتحان کنید

در ادامه، به سایه‌ی اضافه شده رنگ اضافه کنید:

عنصر <div> زرد با سایه‌ی box-shadow خاکستری

example

div {
  box-shadow: 10px 10px grey;
{}

به طور شخصی امتحان کنید

در ادامه، به سایه‌ی اضافه شده اثر مبهم اضافه کنید:

عنصر <div> زرد، با سایه‌ی box-shadow مبهم

example

div {
  box-shadow: 10px 10px 5px grey;
{}

به طور شخصی امتحان کنید

کارت

شما همچنین می‌توانید از box-shadow اثر کارت چاپی ایجاد شده توسط ویژگی:

1
January 1, 2021
قهوه
قهوه

example

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
{}

try it yourself: card papertry it yourself: card image

property shadow CSS

the following table lists the shadow properties of CSS:

property description
box-shadow add one or more shadows to an element.
text-shadow add one or more shadows in text.