Cum să rotunji colțuri css

Cum să rotunji colțuri css

CSS3 permite webmasterului să rotunjească colțurile. În acest articol, veți vedea tot felul de efecte care pot fi obținute cu această proprietate.
Înainte de a studia rotunjirea colțurilor în CSS, vă recomand să familiarizați cu lecțiile anterioare pe această temă:
Frontierele css și margini - margine și padding.
raza de graniță este o proprietate universală care vă permite să realizați rotunjirea colțurilor frontierei elementului. Această proprietate, totuși, funcționează numai în browserele moderne.
Pentru ca rotunjirea să funcționeze în unele versiuni mai vechi ale browserelor, utilizați prefixe speciale:

Pentru browserele Chrome de până la 4.0, Safari la 5.0, iOS

Cea mai mare problemă cu raza de graniță apare în IE (funcționează cu versiunea 9), în Opera - c 10.5.
puncte de rază de frontieră pentru fiecare parte a frontierei:

Valorile razei de graniță:
  1. pixeli
  2. la sută din lățimea blocului,
  3. em,
  4. valorile pot fi specificate prin slash (/). Prima valoare (înainte de slash) specifică raza pentru lățime și a doua valoare pentru înălțimea blocului.
exemplu:




border-radius



raza de raza



rezultat:

Pentru ca acest cod să funcționeze în versiunile anterioare ale Chrome și Firefox, duplicăm proprietățile, le prescriim cu prefixe -webkit și -moz:
raza de graniță: 15 pixeli;
-webkit-border-radius: 15px;
-moz-border-radius: 15px; Exemplu de setare a rotunjirii neuniforme a colțurilor:

O scurtă intrare a razei de margine: valorile sunt indicate printr-un spațiu sau o bară. Puteți specifica / *
  1. o valoare - în acest caz regula se extinde la întregul bloc. exemplu:

  • două - primul număr indică raza de curbură pentru stânga sus și dreapta din dreapta, iar cea de-a doua pentru partea dreaptă sus și stânga jos. exemplu:

    raza de graniță: 25px 5px;

  • trei - primul - pentru stânga sus, cel de-al doilea - pentru partea dreaptă superioară și stânga jos și cel de-al treilea - pentru dreapta jos:

    raza de graniță: 25px 5px 10px;

  • patru - pentru fiecare unghi separat, începând cu partea stângă sus și apoi în sensul acelor de ceasornic. de conducere:
    Cum să rotunji colțuri css

    exemplu:

    raza de graniță: 25px 5px 10px 1px;

    • Pentru cei care nu le place să scrie coduri manual, există un generator pentru rotunjirea colțurilor css.
    Este posibil să aveți nevoie și de un generator de colț curbat.

    Articole similare

    Pagina anterioară

    Pagina următoare