کنترل برش سرریز

While overflow: hidden is a "blunt instrument" that almost always clips content strictly at the padding-box, overflow: clip combined with overflow-clip-margin provides the "scalpel" for fine-grained layout control across block containers.

بااستفاده از overflow: clip و overflow-clip-margin دقیقاً مشخص کنید که برش در کجا اتفاق می‌افتد. می‌توانید مرز را دقیقاً با لبه‌های مدل جعبه داخلی تراز کنید یا مرز برش را با یک انحراف مشخص (حاشیه ایمنی) فراتر از جعبه عنصر گسترش دهید. این رویکرد مدرن بسیار کارآمد است و نیاز قدیمی به افزودن محفظه‌های پوشاننده اضافی با حاشیه داخلی سفارشی و حاشیه‌های منفی را صرفاً برای اینکه جلوه‌های دیداری (مانند سایه‌های برجسته عنصر فرزند) بدون برش رندر شوند، ازبین می‌برد.

عناصر جایگزین‌شده (<img>، <video>، <canvas>، و غیره) به‌طور پیش‌فرض روی overflow: clip و overflow-clip-margin: content-box تنظیم شده‌اند، که به شما امکان می‌دهد تصاویری را که از object-fit یا border-radius استفاده می‌کنند به‌طور تمیز دربربگیرید.

نحوه پیاده‌سازی

1. اعمال overflow: clip: مطمئن شوید که عنصر هدف overflow: clip را فعال کرده باشد. تنظیم overflow: clip در محفظه‌های چیدمان بلوک برای اعمال شدن overflow-clip-margin اجباری است. اگر overflow روی hidden،‏ auto، یا scroll تنظیم شده باشد، مرورگر ویژگی overflow-clip-margin را نادیده می‌گیرد. overflow: clip از هرگونه پیمایش (چه پیمایش آغازشده توسط کاربر و چه پیمایش برنامه‌ریزی‌شده ازطریق جاوا اسکریپت) جلوگیری می‌کند.
2. تراز کردن با لبه جعبه: از کلیدواژه‌ها برای تراز کردن دقیق مرز برش با لبه‌های مدل جعبه داخلی استفاده کنید:
   • content-box: محتوا را دقیقاً از جایی که ناحیه محتوا شروع می‌شود برش می‌دهد و ناحیه حاشیه داخلی را کاملاً تمیز می‌گذارد. محتوا دقیقاً در لبه حاشیه داخلی متوقف می‌شود. برای ماژول‌های چیدمان تودرتو عالی است.
   • padding-box (پیش‌فرض): محتوا را در لبه داخلی حاشیه برش می‌دهد.
   • border-box: محتوا را در لبه بیرونی حاشیه برش می‌دهد و به محتوا اجازه می‌دهد زیر حاشیه نیمه‌شفاف قرار گیرد یا تاحدی با آن هم‌پوشانی داشته باشد.
3. تعریف کردن یک انحراف مشخص (حاشیه برش): یک مقدار طول (مثلاً 15px یا 5px) ارائه دهید تا یک منطقه ایمن قبل‌از برش پیکسل‌ها ایجاد شود. این کار باعث می‌شود سایه‌های عنصر فرزند برجسته بدون گسترش هندسه چیدمان، به‌صورت برش‌نخورده فراتر از لبه مرز ارائه شوند.
4. ترکیب Box-Edge و Offset: هم لبه جعبه و هم طول جابه‌جایی را به‌طور هم‌زمان مشخص کنید (مثلاً content-box 15px) تا از لبه جعبه خاصی جابه‌جا شود.

کد نمونه

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

محفظه‌های مسدود: منحنی‌های گرد تودرتو

• overflow-clip-margin: content-box را روی محفظه ولی با گوشه‌های گرد و حاشیه داخلی سفارشی اعمال کنید.
• گوشه‌های گرد مشابهی را روی رسانه‌های فرزند داخلی و مؤلفه‌های پانویس در امتداد مرز جعبه محتوای داخلی هم‌مرکز اعمال کنید، تا منحنی‌های تودرتوی نامناسب را بدون منطق سفارشی calc() حل کنید.

<div class="nested-curve-parent">
  <img src="avatar.jpg" alt="Nested Curve Demo">
  <div class="nested-curve-footer">Card Footer</div>
</div>

/**
 * Standard block layout container with outer corner radii and padding.
 * Keeps base level 1 fallback clipping roughly at the inner padding box.
 */
.nested-curve-parent {
  /* Level 1 Fallback: clips child roughly at the padding box */
  overflow: hidden;
}

/* Inner footer component with 12px rounded to visually demonstrate automatic concentric corner clipping */
.nested-curve-footer {
  background: #111;
  color: #fff;
}

@supports (overflow-clip-margin: content-box) {
  .nested-curve-parent {
    /* MANDATORY: overflow: clip is required on non-replaced elements */
    overflow: clip;
    /* Automatically curves clipping edge to match inner content-box radius */
    overflow-clip-margin: content-box;
  }
}

Block Containers: Child Element Shadow Bleed

• overflow: clip را اعمال کنید و یک افست طولانی‌تر overflow-clip-margin تعریف کنید تا یک منطقه ایمنی قابل‌مشاهده ایجاد شود که به سایه فرزند اجازه می‌دهد بدون تغییر هندسه چیدمان، به‌صورت برش‌نخورده خارج از محفظه والد رندر شود. بدون این، سایه فرزند در مرز والد بریده می‌شود.

<div class="safety-zone-parent">
  <h4>Clipped Container</h4>
  <p>Inner content boundaries safely contained.</p>
  <!-- Child button element positioned inside with a prominent shadow -->
  <button class="demo-glowing-btn">Submit</button>
</div>

/**
 * Standard block layout container clipping inner content.
 * Base fallback uses overflow: hidden, which abruptly slices child element shadows.
 */
.safety-zone-parent {
  /* Level 1 Fallback: clips overflowing content but truncates child shadows */
  overflow: hidden;
}

/* Child button element positioned inside with an expanded shadow */
.demo-glowing-btn {
  display: block;
  box-shadow: 0 8px 13px rgba(229, 46, 113, 0.7);
}

@supports (overflow-clip-margin: 15px) {
  .safety-zone-parent {
    overflow: clip;
    /* Establishes a visible safety zone allowing child element shadows to render safely outside */
    overflow-clip-margin: 15px;
  }
}

پیاده‌سازی استراتژیک و روال‌های مطلوب

• باید overflow: clip را هنگام استفاده از overflow-clip-margin روی عناصر هدف اعمال کنید، زیرا تنظیم overflow به‌طور دقیق روی clip در محفظه‌های چیدمان بلوک استاندارد برای فعال کردن حاشیه‌های برش منحنی سفارشی یا داخلی اجباری است.
• باید overflow-clip-margin: content-box را روی محفظه‌های لایه‌دار با گوشه‌های گرد تنظیم کنید تا عناصر فرزند داخلی غیرگرد به‌طور خودکار به منحنی‌های حاشیه تودرتو ازنظر ریاضی کامل برش داده شوند، بدون اینکه نیاز به منطق تفریق لایه دستی باشد.
• باید overflow-clip-margin را با انحراف طول مشخص‌شده هنگام اعمال جلوه‌های دیداری خارجی (مانند filter: drop-shadow()) پیکربندی کنید تا از برش تیز جعبه مرزی بدون تغییر یا گسترش هندسه چیدمان جلوگیری شود.
• اگر محفظه به دستکاری پیمایش برنامه‌ای ازطریق جاوا اسکریپت نیاز دارد یا به‌عنوان بافت چیدمان فوری برای عناصر position: sticky عمل می‌کند، overflow: clip را اعمال نکنید، زیرا clip پیمایش را کاملاً غیرفعال می‌کند.

راهبردهای جایگزین

برای محیط‌های هدف فاقد پشتیبانی بومی برای overflow: clip یا overflow-clip-margin، استراتژی‌های بازگشت ارتقای پیش‌رو مستقیماً به هدف بصری بستگی دارد:

• بازگشت به overflow: hidden به‌عنوان تجربه پایه برای تضمین حفظ مرزهای اصلی.
• در عناصری که سایه‌دار یا نشان‌های گوشه خارجی نباید کوتاه شوند، به overflow: visible برگردید.

تکمیل پیاده‌سازی بازگشت به ارتقای پیش‌رو

<!-- 1. Nested rounded edges fallback -->
<div class="demo-container-fallback">
  <img src="example.jpg" alt="Nested Curve Fallback">
  <div class="demo-footer-fallback">Footer</div>
</div>

<!-- 2. Child element shadow bleed fallback -->
<div class="demo-safety-parent">
  <h4>Container</h4>
  <p>Inner boundaries contained.</p>
  <button class="demo-glowing-btn">Submit</button>
</div>

/**
 * 1. Block Container Nested Curves Fallback
 * Keeps base level 1 fallback clipping roughly at the inner padding box.
 */
.demo-container-fallback {  
  /* Level 1 Fallback: clip child roughly at padding box */
  overflow: hidden;
}

.demo-container-fallback img {
  object-fit: cover;
  display: block;
}

@supports (overflow-clip-margin: content-box) {
  .demo-container-fallback {
    overflow: clip;
    overflow-clip-margin: content-box;
  }
}

/**
 * 2. Child Element Shadow Bleed Fallback
 * Base fallback clips content using overflow: hidden, abruptly truncating child element shadows.
 */
.demo-safety-parent {  
  /* Level 1 Fallback */
  overflow: hidden;
}

.demo-glowing-btn {
  display: block;
  width: 100%;
  padding: 6px 12px;
  background: #e52e71;
  box-shadow: 0 8px 13px rgba(229, 46, 113, 0.65);
}

@supports (overflow-clip-margin: 15px) {
  .demo-safety-parent {
    overflow: clip;
    overflow-clip-margin: 15px;
  }
}