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; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.