In dem Fall werden die Werte automatisch proportional heruntergerechnet. Die beiden Codes im folgenden Beispiel hätten denselben Effekt.. selektor { border-top-left-radius: 300%; border-top-right-radius: 150%; border-bottom-right-radius: 300%; border-bottom-left-radius: 150%;} /* Hat denselben Effekt */. Css abgerundete ecken download. selektor { border-top-left-radius: 200%; border-top-right-radius: 100%; border-bottom-right-radius: 200%; border-bottom-left-radius: 100%;} Das ist auch der Grund, weshalb man bei einem quadratischen Element lediglich 50% oder höher angeben muss, um einen Kreis zu erhalten. Die überschüssigen Prozente werden automatisch heruntergerechnet.
In der nächsten Tabelle finden Sie eine Liste der Schlüsselwörter, mit denen bestimmte Ecken explizit ausgewählt werden können. Tabelle: Liste der Schlüsselwörter für das Abrunden bestimmter Ecken, die vom Nifty Corners Cube-JavaScript verstanden werden. Schlüsselwort Bedeutung tl linke obere Ecke tr rechte obere Ecke bl linke untere Ecke br rechte untere Ecke top beide oberen Ecken bottom beide unteren Ecken left beide linken Ecken right beide rechten Ecken all (Standardwert) alle Ecken Um bei mehreren Elementen einer Webseite nur die oberen Ecken abzurunden, könnten Sie also schreiben: Siehe auch Weitere Informationen zum Skript Nifty Corners Cube. Copyright der deutschen Ausgabe © 2007 by O'Reilly Verlag GmbH & Co. KG Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken. CSS3 und abgerundete Ecken » perun.net. Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alles, was Sie tun müssen, ist, a hinzuzufügen WebKit-CSS-Maske zum #wrapper-Element. Sie können ein einzelnes Pixel-PNG-Bild verwenden und es sogar in das CSS einfügen, um eine HTTP-Anforderung zu speichern. Css abgerundete ecken html. width: 300px; height: 300px; position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */ -webkit-mask-image: url(data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */} Fügen Sie Ihrem Element mit Randradius einen Z-Index hinzu, und es maskiert die darin enthaltenen Dinge. jmotes Egal, ich habe es geschafft, das Problem zu lösen, indem ich ein zusätzliches Div zwischen Wrapper und Box hinzugefügt habe. #middle { overflow: hidden;}