CSS باکس-شادی
- پیشین صفحه box-reflect
- پچھلے پہلے box-sizing
تعریف و استفاده
ویژگی boxShadow یک یا چند سایه را به کادر اضافه می‌کند.
نکته:برای ساخت دکمه‌های قابل انعطاف زیبا از ویژگی border-image-* استفاده کنید!
لطفاً به: مراجعه کنید
آموزش CSS3:CSS3 کا کیرنل
دستورالعمل مرجع HTML DOM:ویژگی boxShadow
مثال
سایه box-shadow را به عناصر div اضافه کنید:
div
{
box-shadow: 10px 10px 5px #888888;
}
در پایین صفحه مثال‌های بیشتری وجود دارد.
نوشتار CSS
box-shadow: h-shadow v-shadow blur spread رنگ inset;
نکته:box-shadow یک یا چند سایه را به کادر اضافه می‌کند. این ویژگی یک لیست سایه از جدا شده با کاما است که هر سایه شامل 2 تا 4 مقادیر طول، مقدار رنگ اختیاری و کلمه کلیدی اختیاری inset را مشخص می‌کند. مقادیر طول حذف شده به صفر هستند.
مقدار ویژگی
| مقدار | توضیحات | آزمایش |
|---|---|---|
| h-shadow | ضروری. موقعیت سایه افقی. مقادیر منفی مجاز هستند. | آزمایش |
| v-shadow | ضروری. موقعیت سایه عمودی. مقادیر منفی مجاز هستند. | آزمایش |
| blur | اختیاری. فاصله مبهم. | آزمایش |
| spread | اختیاری. اندازه سایه. | آزمایش |
| رنگ | اختیاری. رنگ سایه. لطفاً به مقادیر رنگ CSS مراجعه کنید. | آزمایش |
| inset | اختیاری. سایه‌های بیرونی (outset) را به سایه‌های داخلی (inset) تغییر دهید. | آزمایش |
جزئیات فنی
| مقدار پیش‌فرض: | هیچ‌کدام |
|---|---|
| ترک حوری: | خیر |
| نسخه: | CSS3 |
| نوشتار JavaScript: | عنصر.style.boxShadow="10px 10px 5px #888888" |
مثال‌های بیشتر
- تصویری که روی میز انداخته شده است
- این مثال نحوه ایجاد تصویر پولاریو و چرخش آن را نشان می‌دهد.
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی است که این ویژگی را کامل پشتیبانی می‌کنند.
عدد کا سیمبل -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
