Flat Responsive WordPress Blog Theme

Sarkok lekerekítése CSS-el - border-radius

1:04 APeti 5 Kommentek Kategória : , , , , , , , ,

Az új böngésző verziók már olyan különleges CSS tulajdonságokat is megtudnak jeleníteni, mint a különböző HTML elemek lekerekítése, vagy a színátmenetek megjelenítése.





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;


Divi WordPress Theme

KAPCSOLÓDÓ BEJEGYZÉSEK

5 hozzászólás

  1. Bambusznád2014. január 31. 16:47

    Ezt a megjegyzést eltávolította a szerző.

    VálaszTörlés
  2. Bambusznád2014. január 31. 16:49

    Nincs válasz lehetőség

    VálaszTörlés
  3. M.B.K.2016. március 5. 22:24

    És ezt hova kell beilleszteni pontosan??:)
    Köszönöm előre a választ!:)

    VálaszTörlés
  4. M.B.K.2016. március 5. 22:27

    És ezt hova kell beilleszteni pontosan??:)
    Köszönöm előre a választ!:)

    VálaszTörlés
  5. APeti2016. március 5. 22:36

    A weblap css kódjába a megfelelő elemhez.
    Pl:
    div {
    border: 2px solid;
    border-radius: 25px;
    }

    VálaszTörlés