VISSZA
MENÜA befoglaló kör vagy ellipszis méretét kulcsszavakkal adhatjuk meg.
A használható kulcsszavak:
closest-side: Az alakzat széle érinti a befoglaló elem legközelebbi oldalát.
farthest-side: Az alakzat széle érinti a befoglaló elem legtávolabbi oldalát.
closest-corner: Az alakzat széle érinti a befoglaló elem legközelebbi sarkát.
farthest-corner : Az alakzat széle érinti a befoglaló elem legközelebbi sarkát.
Sugárirányú színátmenetek beállítása:
kijelölő
{
background-image
:
radial-gradient(forma at pozíció méret, szín1 pozíció, szín2 pozíció, … színN pozíció);
}
Sugárirányú színátmenetek beállítása -webkit- előtaggal:
kijelölő
{
background-image
:
-webkit-radial-gradient(pozíció, forma méret, szín1 pozíció, szín2 pozíció, … színN pozíció);
}
Példa:
Forráskód
<style>
#div1 { /* -moz-..; -ms-..; -o-.. */
background: -webkit-radial-gradient(30% 30%, circle closest-side, #4444ff 0%,#000044 90%,#000000 100%);
background: radial-gradient(circle closest-side at 30% 30%, #4444ff 0%, #000044 90%, #000000 100%);
}
#div2 { /* -moz-..; -ms-..; -o-.. */
background: -webkit-radial-gradient(30% 30%, circle farthest-side, #4444ff 0%,#000044 90%,#000000 100%);
background: radial-gradient(circle farthest-side at 30% 30%, #4444ff 0%, #000044 90%, #000000 100%);
}
#div3 { /* -moz-..; -ms-..; -o-.. */
background: -webkit-radial-gradient(30% 30%, circle closest-corner, #4444ff 0%,#000044 90%,#000000 100%);
background: radial-gradient(circle closest-cornerr at 30% 30%, #4444ff 0%, #000044 90%, #000000 100%);
}
#div4 { /* -moz-..; -ms-..; -o-.. */
background: -webkit-radial-gradient(30% 30%, circle farthest-corner, #4444ff 0%,#000044 90%,#000000 100%);
background: radial-gradient(circle farthest-corner at 30% 30%, #4444ff 0%, #000044 90%, #000000 100%);
}
</style>
...
<body>
<div id="div1"><p>closest-side</p></div>
<div id="div2"><p>farthest-side</p></div>
<div id="div3"><p>closest-corner</p></div>
<div id="div4"><p>farthest-corner</p></div>
</body>
Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: hatter_szinatmenet_radian_meret.html