Rundade kanter - Inskickad: 2008-02-12 18:48
Har du velat kunna låta ett element få runda kanter med hjälp av css istället för att göra bilder för varje kant och hörn? Då har du kommit rätt, för med hjälp av -moz-border-radius är det exakt så du kan göra!
Syntax
Det finns fem olika sätt att använda -moz-border-radius och det är genom den vanliga (d.v.s. -moz-border-radius eller genom att lägga till en extra bit för att endast ändra ett visst hörn av ett element:
-moz-border-radius
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright
Användning
Användningssättet för -moz-border-radius är väldigt enkel då man bara lägger till en storlek som t.ex 10px som vanligt. Notera dock att kanterna inte blir identiska varandra, utan när talen är för små syns till och med inte dem högra ibland (i alla fall i Firefox på Vista), tyvärr.
Exempel
Ta ett exempel då du gör en titel-box som du vill ha rundade kanter på. Låt säga att vi döper den "titel," hur enkelt som helst.
#titel {
background-color:#eee;
border:1px solid #666;
}
background-color:#eee;
border:1px solid #666;
}
Resultat av ovan kod blir en box i grå färg med en mörkare grå ram, simpelt att tänka sig.
Om du även lägger till -moz-border-radius som
#titel {
-moz-border-radius:10px;
background-color:#eee;
border:1px solid #666;
}
-moz-border-radius:10px;
background-color:#eee;
border:1px solid #666;
}
så får du samma box med rundade kanter. Testa själv! ^^
Inskickat av: Rukishou
Kommentarer
|
© 2005-09 Htmlsidan
