ویژگی box-shadow CSS
- صفحه قبل box-reflect
- صفحه بعدی box-sizing
تعریف و استفاده
ویژگی boxShadow یک سایه یا چند سایه به قاب اضافه می‌کند.
نکته:برای ساخت دکمه‌های قابل انعطاف زیبا از ویژگی border-image-* استفاده کنید!
لطفاً به بخش دیگری مراجعه کنید:
آموزش CSS3:کناره‌های CSS3
دستورالعمل مرجع HTML DOM:ویژگی boxShadow
مثال
به عنصر div سایه box-shadow اضافه کنید:
div
{
box-shadow: 10px 10px 5px #888888;
}
در پایین صفحه مثال‌های بیشتری وجود دارد.
آموزش دستور زبان CSS
box-shadow: h-shadow v-shadow تاریکی گسترش رنگ inset;
نکته:box-shadow یک سایه یا چند سایه به قاب اضافه می‌کند. این ویژگی یک لیست سایه‌ها است که توسط کاما جدا شده‌اند، هر سایه شامل 2 تا 4 مقیاس طول، مقدار رنگ اختیاری و مقدار کلیدهای اختیاری inset است. مقادیر طولی حذف شده 0 هستند.
مقدار ویژگی
| مقدار | توضیح | آزمایش |
|---|---|---|
| h-shadow | لازم. موقعیت سایه افقی. مقادیر منفی مجاز هستند. | آزمایش |
| v-shadow | لازم. موقعیت سایه عمودی. مقادیر منفی مجاز هستند. | آزمایش |
| تاریکی | اختیاری. فاصله تاریکی. | آزمایش |
| گسترش | اختیاری. اندازه سایه. | آزمایش |
| رنگ | اختیاری. رنگ سایه. لطفاً به مقادیر رنگ CSS مراجعه کنید. | آزمایش |
| inset | اختیاری. سایه‌های بیرونی (outset) را به سایه‌های داخلی (inset) تغییر دهید. | آزمایش |
جزئیات فنی
| مقدار پیش‌فرض: | هیچ‌یک |
|---|---|
| وراثت: | خیر |
| نسخه: | CSS3 |
| آموزش دستور زبان JavaScript: | ویدئو.style.boxShadow="10px 10px 5px #888888" |
مثال‌های بیشتر
- تصویری که روی میز انداخته‌ایم
- این مثال نشان می‌دهد که چگونه یک تصویر پولی‌اینست (Polaroid) ایجاد می‌شود و تصویر را می‌چرخانیم.
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی هستند که این ویژگی را به طور کامل پشتیبانی می‌کنند.
اعداد -webkit- یا -moz- نشان‌دهنده نسخه اولیه با استفاده از پیشوند هستند.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
- صفحه قبل box-reflect
- صفحه بعدی box-sizing
