Radial gradient css gradient

Radiusul gradient este un gradient pentru crearea de efecte atunci când se schimbă o culoare în alta. Spre deosebire de gradientul liniar. Aici este utilizată o joncțiune circulară sau eliptică. Direcția schimbării culorilor merge în direcții diferite față de centru. Gradientul radial se mai numește și "gradientul circular".







Un gradient radial este specificat folosind proprietatea gradientului radial împreună cu fundalul. El are câțiva parametri, pe care îi vom lua în considerare în mod consecvent.

CSS sintaxă radială-gradient

  • poziția - coordonatele inițiale ale lui X și Y (cele mai des stabilite ca procent). Există constante:
    • sus - centrat pe partea de sus (50% 0%)
    • stânga sus - colțul din stânga sus (0% 0%)
    • dreapta sus - colțul din dreapta sus (100% 0%)
    • centru (în mod prestabilit) - centrul regiunii (50% 50%)
    • centru stânga - centru stânga (0% 50%)
    • centru dreapta - centru drept (100% 50%)
    • fund central de jos (50% 100%)
    • stânga jos - fund stânga (0% 100%)
    • dreapta jos - fund drept (100% 100%)






    Cuvântul cheie la cuvânt este obligatoriu.
  • forma - stabilirea formei gradientului. Există două opțiuni:
    • cerc - cerc
    • elipsă elipsă
  • dimensiunea - modul în care se va întinde gradientul. Poate lua următoarele valori
    • cel mai apropiat - gradientul tinde spre cea mai apropiată margine a elementului.
    • cel mai apropiat colț - gradientul tinde spre cel mai apropiat colț.
    • cea mai îndepărtată (implicită) - gradientul se extinde la marginea de departe a elementului.
    • cel mai apropiat colț - gradientul se extinde până la colțul îndepărtat al elementului.
    Mai jos este un tabel cu exemple
  • color1 - culoarea inițială
  • color2 - culoarea finală

Puteți specifica trecerea mai multor culori separate prin virgule.

În cea mai simplă versiune, puteți specifica numai două culori. De exemplu

Pentru browsere, trebuie să setați această proprietate cu prefixele furnizorilor. -moz -, - webkit-, -ms-, -o-:

Proprietatea gradientului radial poate fi de asemenea făcută repetitiv: repetarea-gradient radial

Exemple cu gradienți radiali

Exemplul 1. Poziție diferită de pornire

Puteți utiliza cuvântul cheie la cuvântul cheie pentru a specifica poziția centrului gradientului radial.

Pagina este convertită la următoarele







Articole similare

Pagina anterioară

Pagina următoare

Trimiteți-le prietenilor: