Border-image-slice қасиеті

border-image-slice қасиеті браузерге суреттің қай бөліктері бұрыштарға, қай бөліктері жақтарға баратынын көрсетеді (және ортаңғы бөлігі қай жерге барады). Бұрыштарға 4 бөлік, жақтарға 4 бөлік және бір бөлік (орталық) элементтің фонына барады (міндетті емес, fill кілт сөзі).

Толығырақ ақпарат алу үшін border-image қасиетіне қараңыз.

Синтаксис

<+css+> селектор { border-image-slice: 1-ден 4-ке дейінгі сандар | 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 қасиеті,
бұл шекара үшін суретті ығысуын тағайындайды