CSS 3, Abgerundete Ecken
CSS 3, neue tolle Funktionen für Designer
Anstatt Verläufe als Bilddateien einzubinden, bestehen dank CSS 3 bereits Möglichkeiten, Verläufe direkt im CSS zu erstellen. Auch die früher nur umständlich zu erstellenden Effekte, wie beispielsweise abgerundete Ecken, lassen sich dank den neuen Funktionen mit einzelnen Befehlen erreichen. Anstatt Bilder für abgerundete Ecken zu verwenden oder viele divs zu verschachteln, reicht heute der CSS-Befehl border-radius: 5px;.
Ecken abrunden in CSS 3
.element {
border: 1px solid red;
background: #6CBF45;
height: 120px; width: 400px;
border-radius: 10px; /* Rundet die Ecken ab */
}
Unterschiedliche Ecken
.element {
border: 1px solid red;
background: #5488CC;
height: 120px; width: 400px;
border-radius: 10px 20px 5px 30px; /* Rundet die Ecken ab */
/* oben-links, oben-rechts, unten-rechts, unten-links */
}