CSS: border-radius si -moz-border-radius
19 Octombrie de Mihail AlinIn sfarsit designerii nu mai sunt nevoiti sa apeleze la complexe table si grafice pentru a crea efectul de "colturi rotunde" pentru div-uri.In acest tutorial vom explica noile propietati CSS3, border-radius si -moz-border-radius.
Autor : Mihail Alin
Sintaxa border-radius
In primul rand trebuie mentionat faptul ca IE nu suporta border-radius ( mare surpriza , LOL ) , vezi exemplele de mai jos in IE .
| Opera | Echivalent Mozilla(Firefox si altele) | Echivalent WebKit(Safari, Chrome) |
| border-radius | -moz-border-radius | -webkit-border-radius |
| border-top-right-radius | -moz-border-radius-topright | -webkit-border-top-right-radius |
| border-bottom-right-radius | -moz-border-radius-bottomright | -webkit-border-bottom-right-radius |
| border-bottom-left-radius | -moz-border-radius-bottomleft | -webkit-border-bottom-left-radius |
| border-top-left-radius | -moz-border-radius-topleft | -webkit-border-top-left-radius |
Exemple
Daca folosesti IE atunci o sa vezi casutele de mai jos avand colturi drepte.
Exemple: boder-radius, -moz-border-radius, -webkit-border-radius
Firefox si alte browsere Mozilla:
Exemplul 1 :
-moz-border-radius:12px;
-moz-border-radius:12px;
Exemplul 2 :
-moz-border-radius-bottomright:2em;
-moz-border-radius-bottomleft:1em;
-moz-border-radius-bottomright:2em;
-moz-border-radius-bottomleft:1em;
Exemplul 3 -moz-boder-radius 2 valori :
-moz-border-radius:1em 3em;
-moz-border-radius:1em 3em;
Exemplul 4 :
-moz-border-radius-bottomright:2em;
-moz-border-radius-topright:1em;
-moz-border-radius-bottomright:2em;
-moz-border-radius-topright:1em;
Doar in Opera browser:
Exemplul 1 :
border-radius:12px;
border-radius:12px;
Exemplul 2 :
border-top-right-radius:27px;
border-top-left-radius:15px;
border-top-right-radius:27px;
border-top-left-radius:15px;
Exemplul 3 :
border-radius:3em 0;
border-radius:3em 0;
WebKit ( Safari, Chrome ) :
Exemplul 1 :
-webkit-border-radius: 12px;
-webkit-border-radius: 12px;
Exemplul 2 :
-webkit-border-bottom-right-radius:1.5em;
-webkit-border-top-left-radius:4em;
-webkit-border-bottom-right-radius:1.5em;
-webkit-border-top-left-radius:4em;
Exemplul 3 :
-webkit-border-radius: 5em 1em;
-webkit-border-radius: 5em 1em;
Si bineinteles ca putem sa facem o casuta care sa mearga in toate browserele ( inafara de IE ) :
Exemplul :
-webkit-border-radius: 12px;
-moz-border-radius:12px;
border-radius:12px;
-webkit-border-radius: 12px;
-moz-border-radius:12px;
border-radius:12px;
Exemplul 2 :
-moz-border-radius-bottomright:2em;
-moz-border-radius-topright:1em;
border-top-right-radius:1em;
border-bottom-right-radius:2em;
-webkit-border-top-right-radius:1em;
-webkit-border-bottom-right-radius:2em;
-moz-border-radius-bottomright:2em;
-moz-border-radius-topright:1em;
border-top-right-radius:1em;
border-bottom-right-radius:2em;
-webkit-border-top-right-radius:1em;
-webkit-border-bottom-right-radius:2em;
Da si tu un like
Tweet
Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta