Kazi ya radial-gradient
Kazi radial-gradient huweka
mwinuko wa radi. Kazi hii inatumika kwa sifa ambazo
huweka picha ya usuli: background,
background-image
au picha ya mpaka: border-image,
background-image-source.
Kisarufu
kichaguzi {
background: radial-gradient([umbo aina nafasi], rangi1 ukubwa1, rangi2 ukubwa2...);
}
Thamani
| Thamani | Maelezo |
|---|---|
| umbo |
Thamani zinazokubalika:
ellipse mwinuko wa duaradufu (chaguomsingi),
circle mwinuko wa duara.
|
| aina |
Huamua mvutano wa mwinuko.
Thamani zinazokubalika:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| nafasi |
Baada ya neno kuu at
huainishwa nafasi kwa vyovyote vipimo vya ukubwa
au kwa kutumia maneno kuu top, bottom,
left, right, center
katika mchanganyiko mbalimbali.
|
| rangi1 | Rangi ya mwanzo ya mwinuko kwa vyovyote vipimo vya rangi. |
| rangi2 | Rangi ya mwisho ya mwinuko kwa vyovyote vipimo vya rangi. |
| ukubwa | Huamua kiwango cha rangi fulani ya mwinuko kwa vyovyote vipimo vya ukubwa. |
Thamani za aina
| Thamani | Maelezo |
|---|---|
closest-side |
Umbio la mwinuko linalingana na upande wa karibu zaidi wa kizuizi. |
closest-corner |
Umbio la mwinuko linahesabiwa kulingana na umbali wa kona ya karibu zaidi ya kizuizi. |
farthest-side |
Mwinuko huenea hadi upande wa mbali zaidi wa kizuizi. |
farthest-corner |
Umbio la mwinuko linahesabiwa kulingana na umbali wa kona ya mbali zaidi ya kizuizi. |
Uchunguzi
Aina na umbo zinaweza kubadilishwa nafasi, lakini nafasi lazima iwe mwisho wa kigezo cha kwanza. Aina ya mwinuko na ukubwa wake haifanyi kazi pamoja (ina mantiki, kwa sababu zinakinzana). Ukubwa ndio unashinda.
Mfano . Chaguo rahisi zaidi
Wacha tuweke rangi ya mwanzo na ya mwisho:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Mfano . Tuongeze nafasi
Wacha tuweke nafasi ya kituo:
30px - pengo la kushoto, 100px - pengo la juu:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Mfano . Nafasi kwa asilimia
Wacha tuweke nafasi ya kituo kwa asilimia:
30% - pengo la kushoto, 50% - pengo la juu:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Mfano . Nafasi kwa neno kuu
Inaweza kutumika maneno kuu
top, bottom, left,
right, center katika mchanganyiko
mbalimbali. Wacha tuweke mwinuko
kulia katikati:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Mfano . Ukubwa wa mwinuko
Katika kesi hii mwinuko utafanya kazi hivi:
kutoka 0px hadi 20px utakuwa na rangi
nyekundu safi, kutoka 20px hadi 60px - mwinuko
kutoka nyekundu hadi bluu, baada ya 60px - bluu
safi:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Mfano . Rangi nyingi mfululizo
Katika kesi hii mwinuko utafanya kazi hivi:
kutoka 0px hadi 20px utakuwa na rangi
nyekundu safi, kutoka 20px hadi 40px
utakuwa na rangi bluu safi, kutoka 40px
hadi 60px - mwinuko kutoka bluu hadi kijani,
baada ya 60px - kijani safi:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Mfano . Ukubwa + nafasi
Wacha tuweke wakati mmoja vipimo kwa rangi tofauti na nafasi ya kituo cha mwinuko:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Mfano . Umbo la mwinuko
Umbo la mwinuko huwekwa kwa kigezo cha kwanza
na inaweza kuchukua 2 thamani: circle
(mwinuko wa duara) au ellipse (mwinuko wa
duaradufu, chaguomsingi). Kwa nini mpaka sasa
hatukuona miinuko ya duaradufu, ingawa
imewekwa chaguomsingi? Kwa sababu mpaka sasa
umbo la vizuizi lilikuwa mraba. Ikiwa tutabadilisha
umbo kuwa mstatili, basi tutaona mwinuko wa duaradufu:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Mfano . Mwinuko wa duara
Wacha tufanye mwinuko wa duara kwenye kizuizi
cha mstatili. Kwa hili tuweke kigezo cha kwanza
umbo la mwinuko kwa kutumia neno kuu
circle:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Mfano . Tuongeze nafasi
Wacha kwenye msimbo uliopita tuongeze nafasi ya mwinuko:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Mfano . Aina farthest-corner + circle
Umbo la mwinuko linahesabiwa kulingana na umbali wa kona ya mbali zaidi ya kizuizi:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Mfano . Aina farthest-corner + ellipse
Umbo la mwinuko linahesabiwa kulingana na umbali wa kona ya mbali zaidi ya kizuizi:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Mfano . Aina farthest-side + circle
Mwinuko huenea hadi upande wa mbali zaidi wa kizuizi:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Mfano . Aina farthest-side + ellipse
Mwinuko huenea hadi upande wa mbali zaidi wa kizuizi:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Mfano . Aina closest-corner + circle
Umbo la mwinuko linahesabiwa kulingana na umbali wa kona ya karibu zaidi ya kizuizi:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Mfano . Aina closest-corner + ellipse
Umbo la mwinuko linahesabiwa kulingana na umbali wa kona ya karibu zaidi ya kizuizi:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Mfano . Aina closest-side + circle
Umbo la mwinuko linalingana na upande wa karibu zaidi wa kizuizi:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Mfano . Aina closest-side + ellipse
Umbo la mwinuko linalingana na upande wa karibu zaidi wa kizuizi:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Angalia pia
-
kazi
linear-gradient,
ambayo huunda mwinuko wa mstari -
kazi
repeating-linear-gradient,
ambayo huunda mwinuko wa mstari unaojirudia -
kazi
repeating-radial-gradient,
ambayo huunda mwinuko wa radi unaojirudia
