Ihr wollt eurer Blocknavi oder euren Bildern einen abgerundeten Rand geben? Dann seid ihr hier genau richtig!
Die Hauptbefehle für abgerundete Ecken lauten:
border-bottom-left-radius: 5px; (untere linke Ecke)
border-bottom-right-radius: 5px; (untere rechte Ecke)
border-top-left-radius: 5px; (obere linke Ecke)
border-top-right-radius: 5px; (untere rechte Ecke)
Da wir aber für die verschiedenen Browser verschiedene Befehle brauchen und der Code dann viel zu unübersichtlich wird, nehmen wir nur einen einzigen Befehl:
border-radius: 5px;
Dieser Befehl bestimmt den gesamten Rand und die einzelnen Ecken können wir uns nun getrost sparen.
Wir sind aber noch nicht fertig, denn damit die abgerundeten Ecken in allen Browsern sichtbar sind, müssen wir an den Befehl verschiedene Anfänge anhängen.
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5 px;
-ms-border-radius: 5px;
Nun habt ihr insgesamt fünf Befehle (wobei man den Hauptbefehl ohne Anhänge auch hinzufügen kann), die ihr in den CSS-Code einfügt. KHTML kann man allerdings auch weglassen, da es Browser betrifft, die kaum jemand benutzt.
Die Anhänge bedeuten:
webkit = Safari und Chrome
moz = Mozilla
o = Opera
ms = Internet Explorer
Die Zahl könnt ihr nun nach euren belieben anpassen. Je höher die Zahl, desto runder sind die Ecken.
Wollt ihr verschieden abgerundete Ecken, so müsst ihr die vier verschiedenen Befehle zur Bestimmung nehmen und die jeweiligen Browser hinzufügen. Dann wird euer Code, wie oben erwähnt, jedoch sehr lang.
|
