CSS3 border radius

september 25, 2010 § Lämna en kommentar

Jag vill förklara närmare hur border radius fungerar. Här är en grafik så att ni förstår vad jag menar.

Koden till den bilden ser ut såhär:
-webkit-border-top-left-radius: 40px 30px;
-webkit-border-top-right-radius: 20px 50px;
-webkit-border-bottom-right-radius: 60px 10px;
-webkit-border-bottom-left-radius: 30px 90px;

Eller såhär i Firefox

-moz-border-radius-topleft: 40px 30px;
-moz-border-radius-topright: 20px 50px;
-moz-border-radius-bottomright: 60px 10px;
-moz-border-radius-bottomleft: 30px 90px;

W3C vill att det ska se ut såhär

border-top-left-radius: 40px 30px;
border-top-right-radius: 20px 50px;
border-bottom-right-radius: 60px 10px;
border-bottom-left-radius: 30px 90px;

Det kan vara bra att använda alla för att säkra utseendet i många webbläsare.

Annonser

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s

Vad är detta?

Du läser för närvarande CSS3 border radiusTobiasboman's Blog.

Meta

%d bloggare gillar detta: