Wie Sie Creat CSS abgerundete Ecken

Eines der beliebtesten Features von CSS3 ist das Randradius-Attribut, das Ihnen erlaubt, Felder und Schaltflächen mit abgerundeten Ecken zu erstellen. Obwohl Sie abgerundete Eckeneffekte erstellen können, indem Sie ein Bild für jede Ecke erstellen, nehmen Sie diese Zeit zu erstellen und weitere Markup der Seite hinzufügen. Das Border-Radius-Attribut können Sie wahre abgerundete Ecken zu erstellen, die alle aktuellen Browsern angezeigt werden kann. Ältere Browser ignorieren das Attribut, das anmutig degradiert, die standard-Box-Ecken zeigen.

Anweisungen

1 Öffnen Sie einen Text-Editor oder Web-Design-Anwendung, und erstellen Sie eine neue HTML-Seite.

2 Fügen Sie den folgenden Code in die Zeile vor dem schließenden "< / Head >"-Tag:

< Typ style = "Text/Css" >

{.rounded}

border: solid 2px #000;

border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;

width: 200px; height: 40px;

}

< / style >

Dies definiert eine CSS-Stylesheet enthält eine Klasse namens "gerundet." Innerhalb dieser Klasse legen Sie zuerst die Grenze für das Zielelement mit einer 2-Pixel-Dick durchgehende schwarze Linie für dieses Beispiel. Als nächstes legen Sie den Grenze Radius für die abgerundeten Ecken, gemessen in Pixel. Jeder Browser nutzt derzeit eigene Attribute Moz-Border-Radius für Firefox und -Webkit-Border-Radius für Webkit-basierten Browser wie Google Chrome und Safari hinzufügen zu müssen. Schließlich können Sie die Breite und Höhe des Target-Elements festlegen.

3 Fügen Sie den folgenden Code nach der Eröffnung "< Body >" HTML-Tag:

< Div Class = "gerundet" >< / Div >

Dies erstellt einen HTML Div-Block und die abgerundete Klasse für Styling gilt.

4 Speichern Sie die Seite als "rounded.htm" und auf Ihren Webserver hochladen. Einen Web-Browser starten, dann öffnen "rounded.htm" um die Seite anzuzeigen. In CSS3-kompatiblen Browsern wie Internet Explorer 9, Google Chrome 4.1 und Firefox 3.5 und höher, das div-Tag ist mit abgerundeten Ecken gestaltet. Früheren Browserversionen, die CSS3 nicht unterstützen, zeigen ein Standarddialogfeld.

5 Ändern Sie den CSS-Code für die abgerundeten Klasse wie folgt:

{.rounded}

border: solid 2px #000;

border-radius: 20px 30px 0px 20px;

-moz-border-radius: 20px 30px 0px 20px;

-webkit-border-radius: 20px 30px 0px 20px;

width: 200px; height: 40px;

}

Dies ermöglicht Ihnen, einen anderen Radiuswert für jede Ecke in dieser Reihenfolge: oben links, oben rechts, unten rechts, unten links. Speichern Sie die Seite und die Ansicht in Ihrem Browser, um die neuen Einstellungen in Aktion zu sehen erstellen eine Rede Blase-förmigen Box.

Tipps & Warnungen

• Sie können eine Anzahl von unterschiedlichen Formen machen, durch Ändern des Radius der einzelnen Ecken, um Stil zu einer Website, ohne hinzuzufügen Bilder, die Ladezeit Seite hinzufügen.