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

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

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

ընտրիչ {
	border-image-source: url(նկարի հասցե);
}

Օրինակ

border-image-source հատկությունը պետք է սահմանել border-image-slice-ի հետ միասին.

<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;
}

Օրինակ

Եթե border-image-slice հատկությունը սահմանված չէ, ամբողջ նկարը կընկնի անկյունները (քանի որ border-image-slice-ի սկզբնադիր արժեքը 100% է).

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

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

Օրինակ

Նկարի փոխարեն կարելի է սահմանել գծային գրադիենտ.

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

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

Օրինակ

Եթե border-image-slice հատկությունը սահմանված չէ, գրադիենտը կընկնի անկյունները (քանի որ border-image-slice-ի սկզբնադիր արժեքը 100% է).

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

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

Օրինակ

Եթե սահմանել border-radius հատկությունը, ապա եզրի կլորացում, դժբախտաբար, չի կատարվի (և գրադիենտի դեպքում նույնպես), թեև էֆեկտը նույնպես բավականին հետաքրքիր կլինի.

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

#elem {
	border-radius: 100px;
	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;
}

Տես նաև

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