Warum läuft CSS3 „border-radius' in Chrome/Opera über und wie kann das behoben werden?

So lösen Sie das Überlaufproblem mit abgerundeten CSS3-Ecken in Chrome/Opera

In bestimmten Situationen können Sie mit der Eigenschaft border-radius von CSS3 abgerundete Ecken erstellen Ecken in einem übergeordneten Div können in den Browsern Chrome und Opera zu einem Inhaltsüberlauf führen. Dieses Problem tritt auf, wenn das übergeordnete Element relativ oder absolut positioniert ist.

Ursprünglicher Ansatz

Der folgende Code veranschaulicht das Problem in Chrome/Opera:

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

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

Dieser Ansatz, der in Firefox und IE9 funktioniert, kann den überlaufenden Inhalt nicht maskieren Chrome/Opera.

Verbesserte Lösung

Eine Lösung besteht darin, eine WebKit-CSS-Maske zum #wrapper-Element hinzuzufügen:

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

Dieser Ansatz verwendet ein Einzelpixel-PNG-Bild, um eine CSS-Maske zu definieren, die den überlaufenden Inhalt maskiert. Es löst effektiv das Überlaufproblem in Chrome/Opera und behält die abgerundeten Ecken bei.

Das obige ist der detaillierte Inhalt vonWarum läuft CSS3 „border-radius' in Chrome/Opera über und wie kann das behoben werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!