E-Book Startseite Karteikarten-Programm
0
Inhalt dieser Seite
  1. abgerundete Ecken und Kreise

abgerundete Ecken und Kreise

Eine weitere Funktion in CSS3 ist das Abrunden von Ecken. Es gibt insgesamt 5 verschiedene Eigenschaften mit denen man, dies einstellen kann: border-top-left-radius (Ecke oben links), border-top-right-raddius (Ecke oben rechts), border-bottom-right-radius (Ecke unten rechts), border-bottom-left-radius (Ecke unten links) und border-radius (allgemeiner Befehl). Als Wert müssen nummerische Angaben verwendet werden. Im allgemeinen Befehl gilt folgende Regel: Wenn eine Zahl angegeben wird, gilt es für alle Ecken. Wenn zwei Zahlen angegeben werden, bilden sich immer 2 Paare (die gegenüberliegenden Ecken sind gleich). Wenn vier Zahlen angegeben werden, gilt die Reihenfolge im Uhrzeigersinn. Übrigens es ist auch relativ einfach ein Kreis zu erstellen. Als Werte für das Abrunden der Ecken geben Sie einfach den Radius des Kreises ein, der entstehen soll. Hier ein Beispiel zu den abgerundeten Ecken:

#box {
    background-color: #00FF00;
    border-top-left-radius: 30px;
    border-top-right-radius: 300px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 5px;
    width: 500px;
    height: 200px;
}
Anzeigebeispiel
Anzeigebeispiel


Nun können die Angaben noch erweitert werden. Denn nun können auch noch den horizontalen (x-Achse) und vertikalen (y-Achse) Achsen einzelne Rundungen gegeben werden. Die 1. Zahl steht für die x-Achse die 2. für die y-Achse. Getrennt werden die Zahlen mit einem Leerzeichen. Mit dieser Erweiterung können sogenannte "asymmetrische Rundungen" erstellt werden. Bitte beachten Sie, dass wenn Sie diese Funktion nutzen wollen, der allgemeine Befehl für abgerundete Ecken nicht verwendet werden darf. Dazu dieses Beispiel:

#box {
    background-color: #00FF00;
    border-top-left-radius: 30px 10px;
    border-top-right-radius: 300px 150px;
    border-bottom-left-radius: 0px 5px;
    border-bottom-right-radius: 5px 20px;
    width: 500px;
    height: 200px;
}
Anzeigebeispiel
Anzeigebeispiel



Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de