Hogyan kerekíteni a sarkokat css

előző ◈ a következő

Hogyan kerekíteni a sarkokat css

CSS3 lehetővé teszi a webmester kerekíteni a sarkokat. Ebben a cikkben látni fogja mindenféle hatásokat lehet elérni ezzel a tulajdon.
Mielőtt megvizsgálnánk a szögek görbület css, azt ajánlom, hogy olvassa el az előző órákon a témáról:
CSS border és margók - margin és padding.
border-radius - univerzális tulajdonság, amely lehetővé teszi a lekerekítés elem keretben. Ez a tulajdonság azonban csak akkor működik a modern böngészőkben.
Annak érdekében, hogy a kerekítés és a munka néhány régebbi böngészők, használja a speciális előtagot:

Chrome böngésző akár 4,0, Safari előtt 5.0, iOS

A legnagyobb probléma a border-radius megjelenik IE (működik 9-es verzió), az Opera - c 10.5.
border-radius pont mindkét oldalán a határ:

Értékek border-radius:
  1. képpont
  2. százalékos blokk szélessége,
  3. em,
  4. értékeket lehet beállítani a perjel (/). Az első érték (mielőtt perjel) beállítja a szélességét a sugár, és a második - egy blokk magassága.
például:




border-radius



szegély sugara



eredmény:

Annak érdekében, hogy ezt a kódot, hogy a munka a régi Verviers Chrome és a Firefox ismétlődő tulajdonságokat, amelyek előírják számukra előtagokat -webkit és -moz:
border-radius: 15px;
-WebKit-border-radius: 15px;
-moz-border-radius: 15px; Például a munkahely egyenetlen lekerekítés:

Gyorsírás border-radius: a megadott értékek egy szóközzel vagy perjel. Talán jelzése / *
  1. Az egyik fontos - ebben az esetben az a szabály vonatkozik az egész blokk. például:

  • két - az első szám jelzi a görbületi sugár a bal felső és jobb alsó, és a második - a jobb felső és a bal alsó sarokban. például:

    határ-sugár: 25 képpont 5px;

  • három - az első - a bal felső, és a második - a jobb felső és bal alsó, és a harmadik - a jobb alsó:

    határ-sugár: 25 képpont 5px 10px;

  • Négy - minden sarok külön, kezdve a bal felső és a folyamatos óramutató járásával megegyező irányban. Vezetés:
    Hogyan kerekíteni a sarkokat css

    például:

    határ-sugár: 25 képpont 5px 10px 1px;

    • Azok számára, akik nem szeretnek írni kódot kézzel, egy generátort, hogy kerek a sarkokat css.
    Akkor is kell egy generátor sarkok kerekítés a kép.

    Kapcsolódó cikkek

    előző ◈ a következő