Sarkok lekerekítése CSS-el - border-radius
1:04 APeti 5 Kommentek Kategória : border , CSS , grafika , honlapkészítés , HTML , html 5 , radius , weblap , weboldal
Először a lekerekítést mutatom be, amely a border-radius tulajdonság.
A border-radius CSS kódja
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 3px solid #000000;
background-color: #940000;
Ennél a kódnál a terület mind a négy sarkának az értékét külön-külön meg tudjuk adni. Így akár eltérő vagy ellentétes formákat (ovális, ellipszis) is létre lehet hozni.
Ha mind a négy sarkot egyforma méretűre szeretnénk beállítani, akkor egyszerűbb, ha egy értékkel adjuk meg a lekerekítés értékét.
A rövidebb kód
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
Vagy akár kört is tudunk rajzolni az alábbi módon
border-radius: 225px 225px 225px 225px;
-moz-border-radius: 225px 225px 225px 225px;
-webkit-border-radius: 225px 225px 225px 225px;