Kontrola przycinania przepełnienia

Właściwość overflow: hidden jest „tępym narzędziem”, które prawie zawsze przycina zawartość ściśle do pola dopełnienia, natomiast właściwość overflow: clip w połączeniu z overflow-clip-margin działa jak „skalpel”, który umożliwia precyzyjne kontrolowanie układu w kontenerach blokowych.

Określ dokładnie, gdzie występuje przycinanie, używając overflow: clip i overflow-clip-margin. Możesz precyzyjnie wyrównać granicę z wewnętrznymi krawędziami modelu pudełkowego lub rozszerzyć granicę przycinania poza pole elementu o określone przesunięcie (margines bezpieczeństwa). To nowoczesne podejście jest bardzo wydajne i eliminuje starsze wymaganie dodawania dodatkowych kontenerów z niestandardowymi dopełnieniami i ujemnymi marginesami tylko po to, aby efekty wizualne (takie jak wyraźne cienie elementów podrzędnych) były renderowane bez przycinania.

Zastąpione elementy (<img>, <video>, <canvas> itp.) domyślnie mają wartości overflow: clip i overflow-clip-margin: content-box, co pozwala na precyzyjne kontrolowanie obrazów, które używają wartości object-fit lub border-radius.

Jak to zrobić?

1. Zastosuj overflow: clip: sprawdź, czy element docelowy ma włączoną opcję overflow: clip. Ustawienie overflow: clip jest wymagane w kontenerach układu blokowego, aby overflow-clip-margin działało. Jeśli zasada overflow ma wartość hidden, auto lub scroll, właściwość overflow-clip-margin jest ignorowana przez przeglądarkę. overflow: clip uniemożliwia przewijanie (zarówno przez użytkownika, jak i programowo za pomocą JavaScriptu).
2. Wyrównanie do krawędzi pola: użyj słów kluczowych, aby precyzyjnie wyrównać granicę przycinania do wewnętrznych krawędzi modelu pola:
   • content-box: przycina zawartość dokładnie tam, gdzie zaczyna się obszar zawartości, pozostawiając obszar dopełnienia całkowicie czysty. Treść kończy się dokładnie na krawędzi dopełnienia. Doskonale nadaje się do zagnieżdżonych modułów układu.
   • padding-box (domyślna): przycina zawartość na wewnętrznej krawędzi obramowania.
   • border-box: przycina zawartość na zewnętrznej krawędzi obramowania, dzięki czemu może ona znajdować się pod półprzezroczystym obramowaniem lub częściowo się z nim pokrywać.
3. Zdefiniuj określone przesunięcie (spad): podaj wartość długości (np. 15px lub 5px), aby utworzyć strefę bezpieczeństwa przed przycięciem pikseli. Dzięki temu wyraźne cienie elementów podrzędnych mogą być renderowane bez przycinania poza krawędzią granicy, bez rozszerzania geometrii układu.
4. Połączenie krawędzi pola i przesunięcia: określ jednocześnie krawędź pola i przesunięcie długości (np. content-box 15px), aby przesunąć od określonej krawędzi pola.

Przykładowy kod

Poniższe przykłady pokazują dynamiczne elementy sterujące układem kontenera, w tym automatyczne zagnieżdżone ramki z zaokrąglonymi rogami i ochronę cieni elementów podrzędnych, a także zastępcze rozwiązania z progresywnym ulepszaniem.

Kontenery bloków: zagnieżdżone zaokrąglone krzywe

• Zastosuj overflow-clip-margin: content-box do kontenera nadrzędnego z zaokrąglonymi rogami i niestandardowym wypełnieniem.
• Zastosuj podobne zaokrąglone rogi w wewnętrznych komponentach multimedialnych i stopkach wzdłuż koncentrycznej granicy wewnętrznego pola treści, aby rozwiązać problem z niezgrabnymi krzywymi zagnieżdżania bez niestandardowej logiki 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;
  }
}

Kontenery blokowe: cień elementu podrzędnego wykracza poza kontener

• Zastosuj overflow: clip i określ rozszerzone przesunięcie długości overflow-clip-margin, aby utworzyć widoczną strefę bezpieczeństwa, która pozwoli na renderowanie cienia elementu podrzędnego bez przycinania poza kontenerem nadrzędnym bez zmiany geometrii układu. Bez tego cień elementu podrzędnego jest przycinany na granicy elementu nadrzędnego.

<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;
  }
}

Strategiczne wdrażanie i sprawdzone metody

• ZASTOSUJ overflow: clip do elementów docelowych, gdy używasz overflow-clip-margin, ponieważ ustawienie overflow ściśle na clip jest obowiązkowe w przypadku standardowych kontenerów układu blokowego, aby aktywować niestandardowe lub wewnętrzne zakrzywione marginesy klipu.
• USTAW właściwość overflow-clip-margin: content-box w kontenerach z dopełnieniem i zaokrąglonymi rogami, aby automatycznie przycinać niezaokrąglone wewnętrzne elementy podrzędne do matematycznie idealnych zagnieżdżonych krzywych obramowania bez konieczności ręcznego odejmowania dopełnienia.
• ZALECAMY skonfigurowanie właściwości overflow-clip-margin z określonym przesunięciem długości podczas stosowania zewnętrznych efektów wizualnych (takich jak filter: drop-shadow()), aby zapobiec ostremu obcinaniu ramki ograniczającej bez zmiany lub rozszerzania geometrii układu.
• NIE stosuj właściwości overflow: clip, jeśli kontener wymaga automatycznego przewijania za pomocą JavaScriptu lub służy jako bezpośredni kontekst układu dla elementów position: sticky, ponieważ clip całkowicie wyłącza przewijanie.

Strategie zastępcze

W przypadku środowisk docelowych, które nie obsługują natywnie overflow: clip ani overflow-clip-margin, strategie zastępcze progresywnego ulepszania zależą bezpośrednio od intencji wizualnej:

• Wróć do overflow: hidden jako podstawowego środowiska, aby zachować podstawowe granice.
• W przypadku elementów, w których nie można obcinać cieni ani zewnętrznych plakietek w rogach, użyj overflow: visible.

Pełna implementacja kreacji zastępczej z progresywnym ulepszaniem

<!-- 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;
  }
}