Kerekített sarkok CSS 3 módra
szeptember 30, 2009 @ 23:19
A sarkok lekerekítése a web 2.0 stílusú design szent grálja. Hovatovább úgy érezzük, hogy már mindenütt ott vannak, és az a felüdülés, ha valahol szögletes sarkot láthatunk. Ezért is van ezen a blogon ez a hasáb szögletes sarkokkal ellátva 
De félreértés ne essék: a lekerekített sarkok szépek, ízlésesek és a CSS 3 segítségével leegyszerűsíthetjük megvalósításukat. Ha eddig lekerekített sarkokra vágytunk, akkor választhattunk jQuery-s megoldást vagy a szintén népszerű Nifty Corners-t. A CSS 3 mellett nincs szükségünk másra, mint néhány beállításra, amire álljon itt a következő kód:
div {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
Itt pedig megnézhető a kód segítségével készült példa. A border-radius tulajdonság a kerekítés mértékét adja meg: minél nagyobb az érték, annál kerekebb a sarok.
A kerekített sarkokat egyelőre a WebKit-es Safari és Chrome, valamint a Gecko-s Firefox támogatja, kísérleti jelleggel.
srmark — 2010. január 28. csütörtök @ 18:26
nagyon jó ez a kód, azonban ezt lehet még bővíteni is, ha firefox-ban perjel elválasztással két értéket adunk meg akkor ovális sarka is lehet egy elemnek, több info itt:
https://developer.mozilla.org/en/CSS/-moz-border-radius
admin — 2010. január 29. péntek @ 20:50
Ez jó. Kösz az infót.
kukko — 2010. december 4. szombat @ 08:03
Ezt tegyem be egy rétegbe a CSS fájlba?
tehát úgy hogy:
#törzs
{
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
És ezen kívül mást is írhatok bele például az igazítást margót színt meg ilyeneket?