ویژگی box-shadow در CSS

box-shadow Property

ویژگی box-shadow در CSS افکت سایه را پیرامون عنصر مورد نظر ایجاد میکند. می توان چندین افکت را بر روی یک عنصر اعمال کرد و هر یک را با (,) از دیگری جدا نمود.

توسط ویژگی box-shadow میتوان انواع مختلف سایه و در جهات و میزان پراکندگی متفاوت را در عناصر ایجاد کرد. در عناصری که گوشه های خمیده دارند، افکت سایه آنها نیز با پیروی از همان قالب و همان حد از خمیدگی ایجاد میشود. در متن نیز میتوان افکت سایه را با دستور text-shadow ایجاد کرد.

نحوه نوشتار

/* مقادیر با کلید واژه */
box-shadow: none;

/* رنگ | فاصله در محور عمودی | فاصله در محور افقی */
box-shadow: 23px -10px teal;

/* رنگ | میزان بلور و محو شدگی | فاصله در محور عمودی |  فاصله در محور افقی */
box-shadow: 13px 2px 2px skyblue;

/*رنگ | میزان انتشار | میزان بلور و محو شدگی | فاصله در محور عمودی | فاصله در محور افقی*/
box-shadow: 12px 20px 3px 3px rgba(235, 235, 250, 0.73);

/* رنگ | فاصله در محور عمودی | فاصله در محور افقی | نوع سایه */
box-shadow: inset 10px 2.3em pink;

/* تعداد مختلف سایه که با ویرگول از یکدیگر جدا می شوند */
box-shadow: 12px 2rem lightgreen, 24px -2rem 0.4em coral;

مقادیر

none​

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

offset-x​

فاصله افکت سایه را در محور افقی با عنصر مربوطه مشخص می کند. مقدار مثبت فاصله را از سمت راست لحاظ کرده و مقدار منفی این فاصله از سمت چپ در نظر می گیرد. مقدار صفر هیچ فاصله ای را در محور افقی در نظر نمی گیرد.

offset-y​

فاصله افکت سایه را در محور عمودی با عنصر مربوطه مشخص می کند. مقدار مثبت فاصله را از پایین لحاظ کرده و مقدار منفی این فاصله را از بالای عنصر در نظر می گیرد. مقدار صفر هیچ فاصله ای را در محور عمودی در نظر نمیگیرد.

blur-offset​

این مقدار، میزان محو شدگی را مشخص می کند.  این مقدار اختیاری می باشد.

spread-offset​

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

color​

این مقدار رنگ سایه را مشخص می کند. بصورت پیشفرض رنگ متن (font-color) را می پذیرد.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<div class="box1">box-shadow: 5px 10px 20px 20px;</div>
<div class="box2">box-shadow: 5px 10px 10px lightblue;</div>
<div class="box3">box-shadow: 5px 10px 10px 15px lightblue;</div>
<div class="box4">box-shadow: inset -5px -10px 20px #777777;</div>

css

div {
   padding: 25px 12px;
   background-color: #bbbbbb;
   display: inline-block;
   margin: 15px;
}
.box1 {
   box-shadow: 5px 10px lightblue;
}
.box2 {
   box-shadow: 5px 10px 10px lightblue;
}
.box3 {
   box-shadow: 5px 10px 10px 10px lightblue;
}
.box4 {
   box-shadow: inset -5px -10px 20px #777777;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.