border-image հատկություն

border-image հատկությունը սահմանում է նկար եզրի համար, այն հանդիսանում է հապավում border-image-source, border-image-slice, border-image-repeat, border-image-width և border-image-outset հատկությունների համար: Մինչդեռ հապավում հատկությունը հայտնվել է CSS-ում ավելի վաղ, քան հապավվող հատկությունները և հետևաբար աջակցվում է ավելի շատ հին բրաուզերների կողմից:

Շարահյուսություն

ընտրիչ {
	border-image: url(նկարի հասցե) տեղաշարժ/հաստություն/հերթականություն կրկնություն;
}

Նկարագրություն

Նկարը, որը մենք ցանկանում ենք կիրառել եզրի համար, պետք է ձևավորվի հատուկ կերպով. 4 մինի նկարներ անկյունների համար և 4 նկարներ կողմերի համար: Նման նկարի օրինակ.

Այս դեպքում կենտրոնական մասը դատարկ է թողնված (քանի որ մենք չենք ցանկանում, որ այն ընկնի տարրի ֆոնի վրա): Նկարի օրինակ լցված կենտրոնական մասով.

slice արժեքը ցույց է տալիս բրաուզերին, թե նկարի որ մասերը կգնան անկյուններ, իսկ որոնք՝ կողմեր (և որ մասը կլինի կենտրոնական): Անկյուններին գնում են 4 մասեր, կողմերին գնում են 4 մասեր և մեկ մաս (կենտրոնական) գնում է տարրի ֆոնի վրա (ըստ ընտրության, բանալի բառը fill):

Նկարը "կտրատվում" է կտորների հետևյալ կերպ. slice արժեքի համար նշվում է մեկից չորս արժեք: Եկեք վերլուծենք օրինակով: Ենթադրենք նշված են հետևյալ արժեքները. 10 20 30 40 (պիքսելները px նշված չեն, դա պայմանավորված է նրանով, որ նկարը կարող է լինել և՛ ռաստերային, և՛ վեկտորային): Արժեքները ցույց են տալիս հետևյալը. 10 կտրել վերևից, 20 կտրել աջից, 30 կտրել ներքևից, 40 կտրել ձախից: Նկարի որ մասը կընկնի ձախ վերևի անկյուն: Դա կլինի կտոր. 10 վերևից, 40 ձախից: Աջ վերևի անկյուն կընկնի 10 վերևից, 20 աջից: Եվ այսպես շարունակ:

Շատ հաճախ նկարը սիմետրիկ է (ինչպես վերևի շեղանկյունները) և մեզ պետք է հավասար կտորներ կտրել անկյունների համար: Այդ դեպքում նշվում է մեկ արժեք, որը կնշանակի նույն տեղաշարժերը բոլոր կողմերից: Նարնջագույն շեղանկյունները կտրելու համար մենք կնշենք slice որպես 26 (քանի որ նարնջագույն շեղանկյունը ունի 26px x 26px չափս): Դեղին շեղանկյունները կընկնեն եզրագծերի վրա և նրանց հետ կատարվելու է հետևյալը. դրանք կամ կձգվեն ամբողջ բլոկի վրա կամ կկրկնվեն եզրի երկայնքով (կախված repeat արժեքից).

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: stretch;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

border-image հատկությունը չի թույլատրում նշել տարրի եզրի հաստությունը: Բրաուզերը պարզապես ձգում է պատկերը եզրի երկայնքով արդեն առկա լայնությամբ: Ուստի այն պետք է նշել border հատկության միջոցով:

Հին բրաուզերների օգտատերերը (կամ անջատված նկարներով) կտեսնեն ստանդարտ շրջանակ, որը նշված է border-ում, ուստի իմաստ ունի դրան տալ համապատասխան ոճ և գույն:

Արժեքներ

Արժեք	Նկարագրություն
url(նկարի հասցե)	Նկարի հասցե: Մանրամասն տես `border-image-source`:
տեղաշարժ	Ցույց է տալիս բրաուզերին, թե նկարի որ մասերը կգնան անկյուններ, իսկ որոնք՝ կողմեր (և որ մասը կլինի կենտրոնական): Հնարավոր արժեքներ. `1`-ից `4` թվեր \| `1`-ից `4` տոկոսներ: Բացատով կարող է նշվել բանալի բառը `fill` թվերին կամ տոկոսներին լրացնելով: Մանրամասն տես `border-image-slice`:
հաստություն	Հատկությունը կառավարում է շրջանակի տեսանելի մասի լայնությունը, մասշտաբավորում է այն: Եթե այս արժեքը մեծ է `border-width` լայնությունից, շրջանակի նկարը կմտնի բովանդակության տակ: Հնարավոր արժեքներ. CSS միավորներ \| տոկոսներ \| թիվ \| `auto`: Մանրամասն տես `border-image-width`:
հերթականություն	Հետաքրքիր հատկություն, որը թույլ է տալիս շրջանակը տեղափոխել տարրի սահմաններից դուրս: Բացասական արժեքներ չեն աջակցվում: Հնարավոր արժեքներ. CSS միավորներ (բացի %-ից (?)) \| դրական թիվ \| auto: Մանրամասն տես `border-image-outset`:
կրկնություն	Նշում է, թե ինչպես կրկնել նկարը եզրերին (ոչ թե անկյուններին). սալիկապատել կամ ձգել: Հնարավոր արժեքներ. `stretch` \| `repeat` \| `round` \| `space`: Մանրամասն տես `border-image-repeat`:

Լռելյայն արժեք. none 100%/1/0 stretch (url(նկարի հասցե) տեղաշարժ/հաստություն/հերթականություն կրկնություն):

Օրինակ . border-image-repeat: repeat արժեք

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Օրինակ . border-image-repeat: stretch արժեք

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Օրինակ . border-image-repeat: round արժեք

Այժմ նորմալ վիճակում սահմանված է repeat արժեքը, իսկ սկսած դեպի - round: Ուշադրություն դարձրեք, որ մինչև դեպի եզրին տեղավորվում է ոչ ամբողջ քանակությամբ շեղանկյուններ, իսկ դեպիից հետո - ամբողջ: Այսպես է աշխատում round-ը.

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26 round;
}
#elem {
	border-style: solid;
	border-width: 42px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Օրինակ . border-image-repeat: երկու բառ

repeat արժեքը լայնության և stretch բարձրության համար.

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Օրինակ . Նկարի լայնության համընկնում եզրի լայնության հետ

Մեծացնենք border-width դեպիի ժամանակ մկնիկի, միաժամանակ border-image-ի հաստությունը թողնելով նույնը: Շեղանկյունները կձգվեն ամբողջ եզրի վրա.

<div id="elem"></div>

#elem:hover {
	border-width: 52px;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Օրինակ . border-image-slice

Վերցնենք մեկ այլ նկար, որում տարբեր կտորները հավասար չեն.

Նշենք, թե նկարի որ մասերն են պետք կտրել - 25% 30% 10% 20%: Աշխատում է դա այսպես. 25% - տեղաշարժ վերևից, 30% - տեղաշարժ աջից, 10% - տեղաշարժ ներքևից, 20% - տեղաշարժ ձախից: Իրականում այս կտորներով մենք կտրում ենք անկյունները: Վերևի ձախ անկյունը կլինի 25% նկարի վերևից, և 20% ձախից: Վերևի աջ անկյունը կլինի 25% նկարի վերևից, և 30% աջից և այսպես շարունակ:

Նաև, եթե դուք մկնիկը կտանեք բլոկի վրա, ապա կգործի fill բանալի բառը, և կենտրոնական մասը կդառնա մեր բլոկի ֆոնը.

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
	border-style: solid;
	border-width: 52px;
	border-image: url("image.png") 25% 30% 10% 20% stretch;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Օրինակ

Կատարենք գրադիենտային եզր գծային գրադիենտի օգնությամբ.

<div id="elem"></div>

#elem {
	background: green;
	border-image: linear-gradient(to bottom, red, blue) 30;
	border-width: 30px;
	border-style: solid;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Օրինակ . border-image-width

Սահմանենք border-image-width արժեքը որպես 2 (եզրի նկարը կդառնա 2 անգամ մեծ ինքնին եզրից) դեպիի ժամանակ մկնիկի տարրի վրա (26/2 - նշված է թեք գծից հետո, միաժամանակ 26 - սա border-image-slice արժեքն է): Ուշադրություն դարձրեք, որ ինքը եզրը չի մեծացել, իսկ եզրի նկարը - այո, քանի որ այն կմտնի տեքստի տակ.

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26/2 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Օրինակ . border-image-outset

Սահմանենք border-image-outset արժեքը որպես 3 դեպիի ժամանակ մկնիկի տարրի վրա: (26/1/2 - նշված է երկրորդ թեք գծից հետո, միաժամանակ 26 - սա border-image-slice արժեքն է, իսկ - 1 - border-image-width արժեքը).

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26/1/3 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Տես նաև

border-image-source հատկությունը,
որը սահմանում է եզրի նկարի հասցեն
border-image-slice հատկությունը,
որը սահմանում է եզրի նկարի բաժանումը
border-image-repeat հատկությունը,
որը սահմանում է եզրի նկարի կրկնությունը
border-image-width հատկությունը,
որը սահմանում է եզրի նկարի չափը
border-image-outset հատկությունը,
որը սահմանում է եզրի նկարի տեղաշարժը