CSS بکس شادی

ویژگی CSS box-shadow

CSS box-shadow پروپرتی باتر کو علامت پر استعمال کیا جاتا ہے。

سادہ ترین استعمال یعنی صرف افقی اور عمودی باتر کا معین کرنا:

کم رنگ کا box-shadow والا برنگی <div> علامت

مثال

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

اپنے آپ سے کچھ کا تجربہ کریں

اب، باتر کا رنگ اضافہ کریں:

کم رنگ کا box-shadow والا برنگی <div> علامت

مثال

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

اپنے آپ سے کچھ کا تجربہ کریں

اب، باتر باتر کا اثر اضافہ کریں:

برنگی <div> علامت، جس پر رومنتیک box-shadow موجود ہے

مثال

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

اپنے آپ سے کچھ کا تجربہ کریں

کارت

آپ کماں اس کو استعمال کرسکتے ہیں box-shadow پروپرتی کریئیشن کارڈ پرنٹ کا اثر:

1
January 1, 2021
کافی
کافی

مثال

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;
}

آزمایش کنید: کارت کاغذآزمایش کنید: کارت تصویر

ویژگی سایه CSS

در جدول زیر ویژگی‌های سایه CSS لیست شده‌اند:

ویژگی توضیح
box-shadow یک یا چند سایه را به یک عنصر اضافه کنید.
text-shadow یک یا چند سایه را به متن اضافه کنید.