Sifa ya border-image

Sifa border-image huweka picha kwa mpaka, ni sifa ya ukataji kwa sifa border-image-source, border-image-slice, border-image-repeat, border-image-width na border-image-outset. Hata hivyo sifa ya ukataji ilionekana katika CSS kabla ya sifa zilizokatwa na kwa hivyo inasaidiwa katika idadi kubwa ya vivinjari vya zamani.

Kisarufi

Maelezo

Picha, ambayo tunataka kutumia kwa mpaka, inapaswa kuandaliwa kwa njia maalum: 4 mini picha za pembe na 4 picha za pande. Mfano wa picha kama hiyo:

Katika kesi hii sehemu ya kati imeachwa nyeupe (kwa sababu hatutaki, iangukie kwenye msingi wa kipengele). Mfano wa picha iliyojaa sehemu ya kati:

Thamani slice inaonyesha kivinjari, sehemu gani za picha zitaenda kwenye pembe, na zipi kwenye pande (na sehemu gani itakuwa ya kati). Kwenye pembe huenda 4 sehemu, kwenye pande huenda 4 sehemu na sehemu moja (ya kati) huenda kwenye msingi wa kipengele (hiari, neno kuu fill).

Picha "hukatwa" vipande vipande kama ifuatavyo : kwa thamani slice imeelezwa kutoka moja hadi thamani nne. Wacha tuchambue kwa mfano. Hebu thamani zifuatazo zibainishwe: 10 20 30 40 (pikseli px haelezwi, hii inahusiana na ukweli kwamba picha inakuwa picha ya raster na vector). Thamani zinasema yafuatayo: 10 kata juu, 20 kata kulia, 30 kata chini, 40 kata kushoto. Sehemu gani ya picha itaangukia kwenye kona ya juu kushoto? Hii itakuwa kipande: 10 juu, 40 kushoto. Kwenye kona ya juu kulia itaangukia 10 juu, 20 kulia. Na kadhalika.

Mara nyingi picha ni ya ulinganifu (kama almasi hapo juu) na tunahitaji kukata vipande sawa kwenye pembe. Katika kesi hiyo thamani moja hubainishwa, ambayo itaweka uhamisho sawa kutoka kila upande. Ili kukata almasi za machungwa, tutaweka slice kuwa 26 (kwa kuwa almasi ya machungwa ina ukubwa 26px kwa 26px). Almasi za manjano zitaangukia kwenye mistari ya mpaka na yafuatayo yatamtokea: zita kunyooshwa kwa kuzingatia kizuizi kizima au kurudiwa karibu na mpaka (inategemea thamani repeat):

:

:

Sifa border-image hairuhusu kuonyesha unene wa mpaka wa kipengele. Kivinjari hunyoosha tu picha karibu na mpaka na upana uliopo. Kwa hivyo inahitajika kuweka kupitia sifa border.

Watumiaji wa vivinjari vya zamani (au walemavu picha) wataona sura ya kawaida, iliyowekwa katika border, kwa hivyo inafaa kuiweka mtindo na rangi inayofaa.

Thamani

Thamani	Maelezo
url(Kiwango cha Picha)	Kiwango cha picha. Kwa undani zaidi tazama border-image-source.
uhamisho	Inaonyesha kivinjari, sehemu gani za picha zitaenda kwenye pembe, na zipi kwenye pande (na sehemu gani itakuwa ya kati). Thamani zinazowezekana: kutoka 1 hadi 4 nambari | kutoka 1 hadi 4 asilimia. Kupitia nafasi inaweza kubainishwa neno kuu fill nyongeza kwa nambari au asilimia. Kwa undani zaidi tazama border-image-slice.
unene	Sifa inasimamia upana wa sehemu inayoonekana ya mfumo, inabadilisha kiwango chake. Ikiwa thamani hii ni kubwa kuliko upana wa border-width, picha ya mfumo itakwenda chini ya yaliyomo. Thamani zinazowezekana: Vitengo vya CSS | asilimia | nambari | auto. Kwa undani zaidi tazama border-image-width.
kuhamisha	Sifa ya kuvutia, inayoruhusu kuondoa mfumo nje ya kipengele. Thamani hasi hazisaidii. Thamani zinazowezekana: Vitengo vya CSS (isipokuwa % (?)) | nambari chanya | auto. Kwa undani zaidi tazama border-image-outset.
kurudia	Inaonyesha, jinsi ya kurudia picha kwenye mpaka (sio kwenye pembe): kutia kioo au kunyoosha. Thamani zinazowezekana: stretch | repeat | round | space. Kwa undani zaidi tazama border-image-repeat.

Thamani chaguomsingi: none 100%/1/0 stretch (url(kiwango cha picha) uhamisho/unene/kuhamisha kurudia).

Mfano . border-image-repeat: thamani repeat

:

Mfano . border-image-repeat: thamani stretch

:

Mfano . border-image-repeat: thamani round

Sasa katika hali ya kawaida imewekwa thamani repeat, na kwa kuelekeza - round. Makini hadi kuelekeza katika mpaka haijaingiza idadi nzima ya almasi, na baada ya kuelekeza - idadi nzima. Hivi ndivyo round inavyofanya kazi:

:

Mfano . border-image-repeat: maneno mawili

Thamani repeat kwa upana na stretch kwa urefu:

:

Mfano . Ulinganifu wa upana wa picha na upana wa mpaka

Tuongeze border-width kwa kuelekeza kifaa cha kusonga, wakati huo huo unene wa border-image uachwe ule ule. Almasi zitanyooshwa kwa mpaka mzima:

:

Mfano . border-image-slice

Wacha tuchukue picha nyingine, ambamo vipande tofauti sio sawa:

Onyesha, sehemu gani kutoka kwa picha zinahitaji kukatwa - 25% 30% 10% 20%. Inafanya kazi hivi: 25% - uhamisho juu, 30% - uhamisho kulia, 10% - uhamisho chini, 20% - uhamisho kushoto. Kwa asili na vipande hivi tunakata pembe. Kona ya juu kushoto itakuwa 25% juu ya picha, na 20% kushoto. Kona ya juu kulia itakuwa 25% juu ya picha, na 30% kulia na kadhalika.

Pia, ikiwa utaelekeza kifaa cha kusonga kwenye kizuizi, basi neno kuu fill litafanya kazi, na sehemu ya kati ya picha itakuwa msingi wa kizuizi chetu:

:

Mfano

Tufanye mpaka wa gradient kupitia gradient ya mstari:

:

Mfano . border-image-width

Wacha tuweke thamani border-image-width kuwa 2 (picha ya mpaka itakuwa 2 mara kubwa kuliko mpaka yenyewe) kwa kuelekeza kifaa cha kusonga kwenye kipengele (26/2 - iliyoonyeshwa baada ya kufyeka, na 26 - hii ni thamani border-image-slice). Makini na ukweli kwamba mpaka yenyewe haujaongezeka, lakini picha ya mpaka - ndiyo, kwa kuwa itaingia chini ya maandishi:

:

Mfano . border-image-outset

Wacha tuweke thamani border-image-outset kuwa 3 kwa kuelekeza kifaa cha kusonga kwenye kipengele. (26/1/2 - iliyoonyeshwa baada ya kufyeka wa pili, na 26 - hii ni thamani border-image-slice, na - 1 - border-image-width):

:

Angalia pia