CSS-abgerundete Ecken-Tutorial

June 19

CSS-abgerundete Ecken-Tutorial

Cascading Style Sheets (CSS) Level drei--besser bekannt als CSS3--gibt Web-Designer die Möglichkeit, viele visuelle Effekte erzeugen, dass einmal geforderte komplizierte Bild schneiden. Anstelle von Bildern in einem Grafikeditor zerschneiden und deren Anwendung auf Ihre Web-Seiten, können Sie nun ein paar Zeilen CSS-Code. Abgerundete Ecken, benötigen z. B. nur die Eigenschaft "Border-Radius". Clevere Verwendung dieser Eigenschaft kann eine Vielzahl von Formen, einschließlich Kreise erstellen. Verwenden Sie die Eigenschaft "Border-Radius" in CSS abgerundete Ecken auf fast jedes HTML-Element zu erstellen.

Anweisungen

Bereiten Sie Ihren HTML-Code

1 Erstellen Sie eine neue HTML-Datei in einem Code-Editor oder Notepad. Kopieren Sie und fügen Sie diesen Code in die Datei:

< html >

< Head >

< Title > Ecken Tutorial < / title >

< / head >

< Körper >

< / body >

< / html >

2 Fügen Sie ein paar Div-Tags zwischen den Body-Tags der HTML-Datei. Geben Sie dem Div einen ID-Namen. Der Code für Ihre Div sollte wie folgt aussehen:

< Div Id = "gerundet" >< / Div >

3 Fügen Sie ein paar Style-Tags nach der Titel-Tags in Ihre HTML-Datei-Kopf. Hier ist ein Beispiel des Style-Tags:

< Typ style = "Text/Css" >< / style >

Wenden Sie abgerundete Ecken mit CSS an

4 Erstellen Sie eine Leerzeile zwischen Ihren Style-Tags, und fügen Sie folgenden Code:

Abgerundete {} Ersetzen "gerundet" mit dem Namen gaben Sie die div.

5 Legen Sie die Eigenschaft "Border-Radius" auf einen Pixelwert Ihrer Wahl. Der Ihre Grenze Radius Wert bestimmt die Menge der Rundung, dass Ihre div. Browsern zuweisen Hier ist ein Beispiel:

Abgerundete {} Border-Radius: 10px;

}

6 Geben Sie jeder Ecke eine andere Kurvengröße durch Festlegen der Eigenschaft "Border-Radius" für jeden einzelnen. So sieht der Code:

Abgerundete {} Grenze-oben-links-Radius: 10px;

Grenze-oben-rechts-Radius: 15px;

Grenze-unten-links-Radius: 20px;

Grenze-unten-rechts-Radius: 25px;

}

7 Entspannen Sie sich die abgerundeten Ecken, indem Sie Ihre "Border-Radius" Eigenschaften "Länge" Werte hinzufügen. Hier ist der Code:

Grenze-oben-links-Radius: 100px 50px;

Der "Länge" Wert 100 Pixel und der Radius auf 50 Pixel festgelegt ist. Dadurch entsteht eine Kurve, die länger als hoch ist. Umkehren der Werte, um eine Kurve zu erstellen, die länger als breit.

Tipps & Warnungen

  • Sie können auch "Border-Radius" Eigenschaften auf Prozentwerten festlegen. Wenden Sie "Border-Radius: 50 %;", Ihre Div zu einem Kreis zu machen.
  • Wenden Sie "Border-Radius" Eigenschaften auf jeder gewünschten HTML-Elements. Sollten Sie anstatt ein Div Rundung der Ecken der Überschriften oder sogar Bilder.
  • Diese CSS3-Codes funktionieren nicht auf ältere Browser, wie Internet Explorer 8 und unten. Sollten Sie eine Image-basierte oder JavaScript Ersatz für diesen Browser verwenden oder Benutzer dieser Browser sehen, scharfe Ecken statt.

SIE KÖNNEN AUCH GERNE