Warum schlagen abgerundete Ecken mit „overflow: versteckt' in WebKit und Opera fehl und wie kann ich das beheben?

Behebung versteckter Überlaufprobleme mit abgerundeten CSS3-Ecken in WebKit und Opera

Das Maskieren von Inhalten unter abgerundeten Ecken erfordert oft die Verwendung der overflow:hidden-Eigenschaft. Diese Technik kann jedoch in WebKit-basierten Browsern (einschließlich Chrome) und Opera zu Fehlfunktionen führen, wenn das übergeordnete Element relativ oder absolut positioniert ist.

Problem:

Zur Veranschaulichung: Beachten Sie bei diesem Problem den folgenden Code:

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute;
}

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

In diesem Fall ist das #wrapper-Div absolut positioniert und hat abgerundete Ecken. In WebKit-basierten Browsern und Opera läuft der Inhalt des #box div jedoch über die abgerundeten Ecken hinaus.

Lösung: WebKit-CSS-Maske

Eine alternative Lösung zur Lösung dieses Problems besteht darin, eine WebKit-CSS-Maske für das #wrapper-Element zu verwenden. Dabei wird ein Einzelpixel-PNG-Bild als Maske verwendet:

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute;
  /* This fixes the overflow in Chrome/Opera */
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

Diese Technik verbirgt erfolgreich den Überlauf in WebKit-basierten Browsern und Opera, sodass die abgerundeten Ecken den Inhalt des untergeordneten Elements effektiv maskieren können.

Das obige ist der detaillierte Inhalt vonWarum schlagen abgerundete Ecken mit „overflow: versteckt' in WebKit und Opera fehl und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!