Хусусияти 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,
ки ҷойивазкунии тасвирро барои ҳудуд муқаррар мекунад