In 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.
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 |
Daca folosesti IE atunci o sa vezi casutele de mai jos avand colturi drepte.
Firefox si alte browsere Mozilla:
Doar in Opera browser:
WebKit ( Safari, Chrome ) :
Si bineinteles ca putem sa facem o casuta care sa mearga in toate browserele ( inafara de IE ) :
Da si tu un like
Tweet
Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta