Border-image-slice հատկություն

border-image-slice հատկությունը նշում է դիտարկիչին, թե նկարի որ մասերը կգնան անկյունների, իսկ որոնք՝ կողմերի համար (և որ մասը կլինի կենտրոնական): Անկյունների համար գնում են 4 մաս, կողմերի համար գնում են 4 մաս և մեկ մաս (կենտրոնական) գնում է տարրի ֆոնի համար (ըստ ցանկության, fill հիմնաբառը):

Ավելի մանրամասն տեղեկությունների համար տեսեք border-image հատկությունը:

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

<+css+> ընտրող { border-image-slice: 1-ից 1-րդից մինչև 4-րդ թվեր | 1-ից 1-րդից մինչև 4-րդ տոկոսներ; } <-css->

Թվերի և տոկոսների հետ միասին բացատով կարող է գրվել fill հիմնաբառը:

Արժեքներ

Արժեք	Նկարագրություն
տոկոսներ	Տոկոսները հաշվարկվում են նկարի չափի նկատմամբ: Հորիզոնականները՝ լայնության, ուղղահայացները՝ բարձրության նկատմամբ:
թվեր	Թվերը պիքսելներ են (ռաստերային նկարների համար) կամ կոորդինատներ (վեկտորայինի համար): Չափման միավորներ չեն նշվում:
`fill`	Լռելյայն պահվածքը ենթադրում է, որ նկարի կենտրոնական մասը կհեռացվի: Որպեսզի այն օգտագործվի, անհրաժեշտ է օգտագործել `fill` հիմնաբառը լրացուցիչ թվերի կամ տոկոսների հետ միասին:

Պարամետրերի քանակը

Խախտումը կարող է ընդունել 1, 2, 3 կամ 4 պարամետր: Ուշադրություն դարձրեք նրան, որ խախտման համար չափման միավորներ չեն գրվում (օրինակ, պարզապես 20, ոչ 20px): Կարելի է նաև հաստությունը նշել %-ով:

Պարամետրերի թիվ	Նկարագրություն
`1`	Հաստությունը բոլոր կողմերի համար միաժամանակ:
`2`	1 2; - `1px` վերևի և ներքևի համար, `2px` ձախ և աջի համար:
`3`	`1 2 3`; - `1px` վերևի համար, `2px` ձախ և աջի համար, `3px` ներքևի համար:
`4`	`1 2 3 4`; - `1px` վերևի համար, `2px` աջի համար, `3px` ներքևի համար, `4px` ձախի համար:

Լռելյայն արժեքը: 100%(?):

Օրինակ

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

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	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-image-source հատկությունը,
որը նշում է նկարի ճանապարհը սահմանի համար
border-image-repeat հատկությունը,
որը նկարի կրկնությունն է սահմանի համար
border-image-width հատկությունը,
որը նշում է նկարի չափը սահմանի համար
border-image-outset հատկությունը,
որը նշում է նկարի տեղաշարժը սահմանի համար