თვისება 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,
რომელიც აზუსტებს საზღვრის სურათის წანაცვლებას