Wie maskiert man überlaufenden Inhalt mit abgerundeten Ecken in Chrome und Opera?

Überlauf mit abgerundeten Ecken in Chrome und Opera ausblenden

Frage:

Wie können Sie Erstellen Sie ein übergeordnetes Div mit abgerundeten Ecken, das den Inhalt seiner untergeordneten Elemente erfolgreich maskiert und gleichzeitig das ordnungsgemäße Überlaufverhalten in Chrome beibehält Opera?

Webkit-Inkompatibilität mit Overflow: Hidden

In Browsern wie Firefox und IE9 werden durch die Anwendung von „overflow: versteckt“ auf ein übergeordnetes Div mit abgerundeten Ecken effektiv alle ausgeblendet Überfüllter Inhalt. In Webkit-basierten Browsern (Chrome, Safari) und Opera schlägt dieser Ansatz jedoch fehl, wenn das übergeordnete Div relativ oder absolut positioniert ist.

Lösung: WebKit-Maske

Eine alternative Lösung besteht darin, eine Webkit-Maske für das übergeordnete Div zu verwenden. Dieser Ansatz maskiert den Bereich außerhalb der abgerundeten Ecken und verbirgt so effektiv alle überlaufenden Inhalte.

Implementierung:

Um diese Lösung zu implementieren, fügen Sie dem übergeordneten Div das folgende CSS hinzu:

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

Diese CSS-Eigenschaft verweist auf ein transparentes PNG-Bild mit einem Pixel, das direkt in das CSS eingebunden werden kann, um ein zusätzliches HTTP zu vermeiden Anfrage.

Beispiel:

Beachten Sie den folgenden Code:

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute; /* original CSS that broke overflow in webkit browsers */
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* webkit mask fix */
}

#box {
  width: 300px;
  height: 300px;
  background-color: #cde;
}

<div><p>Durch die Einbindung dieses Fixes werden die abgerundeten Ecken jetzt effektiv Blenden Sie alle überfüllten Inhalte in Chrome und Opera aus und sorgen Sie so für ein optisch sauberes und ansprechendes Design.</p></div>

Das obige ist der detaillierte Inhalt vonWie maskiert man überlaufenden Inhalt mit abgerundeten Ecken in Chrome und Opera?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!