Radiális gradiens CSS radiális gradiens
Sugaras színátmenet - gradiens létrehozására hatások az átmenet az egyik szín a másikba. Ezzel szemben a lineáris gradiens. ez használ vagy egy kör vagy ellipszis alakú átmenet. Útvonal színváltozás megy különböző irányokba a központtól. Radiális gradiens is az úgynevezett „körkörös gradiens.”
Radiális gradiens által adott tulajdonságainak sugárirányú-gradiens együtt a háttérben. Van egy csomó lehetőség, hogy figyelembe vesszük egymás után.
Szintaxis CSS radiális gradiens
- helyzetben - a kezdeti X és Y koordinátáit (leggyakrabban százalékos részeként definiáljuk). Vannak állandók:
- top - a felső középső (50% 0%)
- bal felső - a bal felső sarokban (0% 0%)
- jobb felső - a jobb felső sarokban (100% 0%)
- központ (az alapértelmezett) - a központ a területen (50% és 50%)
- bal központ - bal Központ (0% és 50%)
- Jobb Központ - jobb középső (100% -ról 50%)
- alsó - középső alsó (50% 100%)
- bal alsó - bal alsó (0% 100%)
- jobb alsó - jobb alsó (100% 100%)
- alak - a feladat a színátmenet alakját. Két lehetőség van:
- kör - kör
- ellipszis - ellipszis
- mérete - mivel a gradiens nyúlik. Lehet, hogy a következő értékeket
- legközelebb oldali - a gradiens alakulhat bezárásához szegély elemet.
- legközelebb sarok - a gradiens hajlamos a legközelebbi sarokba.
- legtávolabbi oldalán (alapértelmezett) - a gradiens kiterjed messze ez a tétel.
- legközelebb sarok - gradiens kiterjed a túlsó sarokban az elem.
- color1 - az eredeti szín
- COLOR2 - a végső szín
Beállíthatjuk az átmenet a több színben, vesszővel elválasztva.
Ami azt illeti, csak két színt, akkor meg egy egyszerű kiviteli. például
Böngészőkre kell állítani az ingatlan az eladóval változat előtagokat. -moz -, - webkit-, -ms-, -o-:
Radiális-gradiens tulajdonság is, hogy megismételjük: ismétlődő-sugaras-gradiens
Példák radiális gradienseket
1. példa Különböző kiindulási helyzet
Keresztül kulcsszó lehet beállítani a helyzetét a központ a sugaras színátmenet.
Az oldalon alakítjuk a következő