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

border-image-outset հատկությունը թույլ է տալիս տեղաշարժել եզրագիծը տարրի սահմաններից դուրս: Որպես արժեք նշվում է թիվ՝ չափման միավորներ չնշելով, կամ ցանկացած չափերի միավոր, բացի տոկոսներից: Եթե նշված է թիվ՝ առանց միավորների, ապա այն բազմապատկիչ է, որով բազմապատկվում է border-width հատկության արժեքը: Բացասական արժեքներ չեն աջակցվում:

Եզրագծի համար նախատեսված պատկերների մասին ավելի մանրամասն տեղեկությունների համար տես border-image հատկությունը:

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

ընտրող {
	border-image-outset: դրական թիվ;
}

Օրինակ . Թիվ

Մկնիկի թրթիռի դեպքում տարրի համար սահմանենք border-image-outset հատկության արժեքը 3: Այս դեպքում եզրագիծը կտեղաշարժվի 26px*3 - 3 անգամ ավելի հեռու, քան border-width-ում սահմանված դրա լայնությունն է:

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

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

Օրինակ . Պիքսելներ

Մկնիկի թրթիռի դեպքում տարրի համար սահմանենք border-image-outset հատկության արժեքը 30px: Այս դեպքում եզրագիծը կտեղաշարժվի 30px:

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

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

Տես նաև

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