نحوه استفاده
- از یک پیش‌تنظیم شروع کنید یا افست، محو، گستردگی، رنگ و شفافیت لایه اول را تنظیم کنید.
- برای عمق طبیعی‌تر لایه‌های بیشتری اضافه کنید، یا برای سایه داخلی «Inset» را علامت بزنید.
- پس‌زمینه پیش‌نمایش و رنگ کادر را متناسب با طراحی خود تغییر دهید، سپس CSS را کپی کنید.
نحوه کار
box-shadow برای هر لایه می‌پذیرد: افست افقی، افست عمودی، شعاع محو، شعاع گسترش و رنگ، که ممکن است قبل از آن inset آمده باشد. افست‌های مثبت سایه را به راست و پایین حرکت می‌دهند. محو لبه را نرم می‌کند و نمی‌تواند منفی باشد؛ گسترش سایه را قبل از محو بزرگ‌تر (مثبت) یا کوچک‌تر (منفی) می‌کند. چند لایه با کاما از هم جدا می‌شوند و اولین لایه در بالا رسم می‌شود.
ارتفاع واقعی معمولاً ترکیبی از یک سایه کوچک و نزدیک با یک سایه بزرگ‌تر و نرم‌تر با شفافیت کم است که همان کاری است که پیش‌تنظیم «Elevated» انجام می‌دهد. رنگ‌ها به صورت rgba() نوشته می‌شوند تا شفافیت واضح باشد. سایه‌ها از border-radius عنصر پیروی می‌کنند و فضای چیدمان را اشغال نمی‌کنند، بنابراین هرگز عناصر دیگر را جابه‌جا نمی‌کنند.
سایه‌هایی با مقادیر محو بسیار بزرگ روی عناصر زیاد می‌توانند اسکرول را در گوشی‌های ضعیف کندتر کنند. اگر سایه‌ای را متحرک کنید، معمولاً نرم‌تر است که یک شبه‌عنصر که از قبل سایه دارد را محو کنید تا اینکه خود box-shadow را متحرک کنید.
نمونه‌ها
کارت روی صفحه روشن
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18); به کارت یک لبه واضح و بلندای نرم می‌دهد.
حلقه فوکوس بدون جابه‌جایی چیدمان
یک لایه با افست 0، محو 0 و گسترش 3px در رنگ برند شما، یک حلقه توپر دور یک دکمه رسم می‌کند. برخلاف حاشیه، اندازه عنصر را تغییر نمی‌دهد.
فیلد ورودی فشرده
inset 0 2px 6px 0 rgba(0, 0, 0, 0.25) باعث می‌شود یک فیلد متنی کمی تو رفته به نظر برسد.
پرسش‌های متداول
تفاوت بین box-shadow و filter: drop-shadow() چیست؟
box-shadow از کادر و border-radius عنصر پیروی می‌کند و از spread و inset پشتیبانی می‌کند. drop-shadow() از شکل قابل مشاهده پیروی می‌کند، از جمله نواحی شفاف تصاویر PNG یا SVG، اما spread یا inset ندارد.
چرا سایه من بریده می‌شود؟
والدی که overflow: hidden دارد هر چیزی را که بیرون از کادرش باشد می‌بُرد، از جمله سایه‌ها. به والد padding اضافه کنید یا قانون overflow را جابه‌جا کنید.
از چند لایه باید استفاده کنم؟
یک یا دو لایه برای بیشتر رابط‌ها کافی است. لایه‌های بیشتر می‌توانند نرم‌تر به نظر برسند اما هزینه رندر کمی بیشتری دارند که در فهرست‌های طولانی اهمیت پیدا می‌کند.
حریم خصوصی
کد CSS در مرورگر شما تولید می‌شود. هیچ داده‌ای بارگذاری یا ذخیره نمی‌شود.