Was passiert, wenn sich die Randradien überlappt?

Die Klugheit der abgerundeten Ecken der CSS -Grenzen ist die flexible Anwendung. Es kann nicht nur einen einheitlichen, abgerundeten Eckradius festlegen, sondern auch unterschiedliche Werte für verschiedene Ecken einstellen. Wenn sich die abgerundete Radien -Überlappung jedoch über die Verarbeitung "hinter den Kulissen" bewirkt, kann der Browser zu einigen unerwarteten Ergebnissen führen.

Viele Entwickler sind mit der "999EM Hack" -Technik vertraut, um "pillenförmige" Rechtecke zu erstellen. Indem die Ecken des Rechtecks ​​einen riesigen Grenzwert (wie 999EM oder 999VMAX) festlegen, können die Ecken des Rechtecks ​​perfekt in Halbkreise abgerundet werden. Der Vorteil dieser Methode besteht darin, dass sie den Effekt erzielen kann, ohne die Größe des Rechtecks ​​zu kennen.

Diese Technik kann jedoch in einigen Fällen abnormales Verhalten haben. Wenn wir beispielsweise versuchen, eine "pillförmige" abgerundete Ecke auf der rechten Seite eines Rechtecks ​​zu erstellen und eine kleinere abgerundete Ecke links einzustellen, kann die abgerundete Ecke links verschwinden oder extrem klein werden.

Dies liegt daran, dass der Browser, um die Überlappung von abgerundeten Eckradien zu verhindern, den Browser entsprechend der Spezifikation einstellt. Die komplexen Formeln in der Spezifikation sollen sicherstellen, dass alle abgerundeten Radien skaliert werden und so Überlappung vermeiden.

Der Browser berechnet das Verhältnis der Summe der Länge jeder Seite des Rechtecks ​​zu seinem angrenzenden abgerundeten Eckradius. Es multipliziert dann alle abgerundeten Radien mit dem kleinsten dieser Verhältnisse. Auf diese Weise werden alle abgerundeten Radien skaliert, bis sie sich nicht mehr überlappt.

Lassen Sie uns mit einem Beispiel veranschaulichen: Wenn das Rechteck in einer Breite von 200px und 100px in Höhe ist, beträgt der abgerundete Eckradius rechts 400px im Radius links 40px im Radius. Der Browser berechnet das Verhältnis:

<code>顶部：200px / (40px 400px) = 0.455右侧：100px / (400px 400px) = 0.125底部：200px / (40px 400px) = 0.455左侧：100px / (40px 40px) = 1.25</code>

Das Mindestverhältnis beträgt 0,125, sodass alle abgerundeten Radien mit 0,125 multipliziert werden. Das Ergebnis ist, dass der Radius der abgerundeten Ecke rechts 50px und der Radius der abgerundeten Ecke links 5px.

Dieser skalierende Mechanismus stellt sicher, dass sich die abgerundete Eckradien nicht überlappt, aber gleichzeitig kann er auch dazu führen, dass die kleineren abgerundeten Eckradien überschritten werden und sogar zu verschwinden scheint.

Der Grund, warum der Browser diesen Weg wählt, ist, dass er die proportionale Beziehung zwischen dem Radius der abgerundeten Ecken aufrechterhalten kann. Wenn der Browser andere Strategien annimmt, z. B. das Verengen des maximalen abgerundeten Radius, kann sich das Endergebnis von den Erwartungen des Entwicklers unterscheiden.

Kurz gesagt, das Verständnis des Verarbeitungsmechanismus von überlappenden abgerundeten Ecken in CSS -Grenzen hilft den Entwicklern, die abgerundeten Eckeneffekte besser zu kontrollieren und unerwartete Ergebnisse zu vermeiden. Dank meiner Kollegin Catherine für die erste Entdeckung dieses Problems und James half mir, die Spezifikation zu verstehen!

Das obige ist der detaillierte Inhalt vonWas passiert, wenn sich die Randradien überlappt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!