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

border-image-repeat қасиеті сурет түріндегі шекараның ішкі бөлігін қайталау әдісін белгілейді. Толықрақ ақпарат алу үшін border-image қасиетіне қараңыз.

Синтаксис

селектор {
	border-image-repeat: stretch | repeat | round;
}

Мәндері

Параметрлер саны	Сипаттама
`stretch`	Шекара суретін элементтің өлшеміне дейін созады. Бұл мән әдепкі бойынша қолданылады.
`repeat`	Шекара суретін қайталайды.
`round`	Суретті қайталап, элементтің қабырғасында бүтін суреттер саны болуы үшін масштабтайды.

Әдепкі мән: stretch.

Параметрлер саны

1 немесе 2 параметр қабылдай алады. Егер екі параметр көрсетілсе, онда біріншісі жоғарғы және төменгі шекараға, ал екінші параметр - сол және оң жақ шекараға қатысты болады.

Мысал . Stretch мәні

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

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

Мысал . Repeat мәні

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

Мысал . Round мәні

Қазіргі уақытта қалыпты жағдайда repeat мәні орнатылған, ал үстінен өткенде - round. Назар аударыңыз, үстінен өткенге дейін шекараға ромбтардың бүтін емес саны сыйса, ал үстінен өткеннен кейін - бүтін сан. round дәл осылай жұмыс істейді:

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

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

Мысал . Екі сөз

Ені үшін repeat мәні және биіктігі үшін stretch мәні:

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

#elem {
	border-image-repeat: repeat stretch;
	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-source қасиеті,
ол шекара үшін суретке жолды белгілейді
border-image-slice қасиеті,
ол шекара үшін суретті бөлуді белгілейді
border-image-width қасиеті,
ол шекара үшін суреттің өлшемін белгілейді
border-image-outset қасиеті,
ол шекара үшін суретті ығысуын белгілейді