Machen Abgerundete Ecken mit CSS 3

Wenn Sie einen Kasten mit abgerundeten Ecken mit früheren Versionen von CSS, Bilder erstellt und HTML-Tabellen, wissen Sie, was ein Schmerz war es - wie Sie vier Bilder zu schaffen hatte (eine für jede Ecke), und wie man musste sorgfältig alles einstellen so dass die Ecken aufgereiht einfach so.

Unabhängig davon, ob Sie die alte Technik versucht, sind Sie sicher zu schätzen wissen, wie viel leichter zu schaffen abgerundeten Ecken, wenn Sie die CSS 3-Eigenschaft border-radius.

Wenn Sie border-radius, geben Sie die Länge des Radius als der Wert der abgerundeten Ecken zu erstellen. Sie können dann Ihre abgerundeten Ecken machen, wie gerundet, wie Sie wollen, und Sie können den Stil auf einen oder alle der Ecken eines Kastens gelten. Hier können Sie ein Diagramm zu sehen Ihnen zu helfen, sehen, wie der Radius Änderung der gekrümmten Ecke ändert.

Sie können sich bewerben border-radius zu jedem Feld Objekt, wie ein Tag oder einen Tag. Hier ist die Syntax für die abgerundeten Ecken in CSS 3 für WebKit-Browsern zu schaffen (beachten Sie, dass r repräsentiert Radius, der Abstand vom Mittelpunkt eines Kreises an der gekrümmten Ecke):

-Webkit-border-radius: r längs-

Wenn Sie einen anderen Radius für jede Ecke angeben wollen, könnte Ihr Stil mehr aussehen wie das folgende Stück Code. In dieser Figur sieht man, wie sich die Werte nur dann, wenn die abgerundete Ecke ändern, um den oberen rechten und unteren linken Ecken angewendet wird:

-Webkit-border-top-left; Radius: 0 - Webkit-border-top-rechts; Radius: 25px; -webkit-border-bottom-rechts; Radius: 0 - Webkit-border-bottom-left; Radius: 25px ;

Sie können noch mehr Kontrolle über den Radius haben, wenn Sie zwei Werte für den Radius angeben, wie folgt aus:

-Webkit-border-radius: 50px 100px;

In dem nächsten Beispiel gezeigt wird, wurde eine Schrifthöhe der Rundung an der Box hinzugefügt, so daß es im Maßstab mit dem Text bleibt. Durch die Verwendung der Einheit em als unsere Maßeinheit, können wir das Design im Maßstab halten sowohl auf dem iPhone und iPad. Dies ist eine nützliche Praxis, wenn Sie abgerundeten Ecken um ein Textelement, wie eine Überschrift hinzufügen möchten:

-Webkit-border-radius: 1em-

Im Beispiel wird ein Schlagschatten und ein Gradient wurde ebenfalls verwendet. Sie können Schlagschatten hinzufügen CSS 3.