თვისება border-image

თვისება border-image აყენებს სურათს საზღვრისთვის, ის არის შემოკლებული თვისება შემდეგი თვისებებისთვის border-image-source, border-image-slice, border-image-repeat, border-image-width და border-image-outset. ამ შემთხვევაში შემოკლებული თვისება გამოჩნდა CSS-ში უფრო ადრე, ვიდრე შემოკლებული თვისებები და ამიტომ მხარდაჭერილია უფრო დიდი რაოდენობის ძველ ბრაუზერებში.

სინტაქსი

სელექტორი {
	border-image: url(სურათის მისამართი) გაჭრა/სიგანე/გადაადგილება გამეორება;
}

აღწერა

სურათი, რომელიც ჩვენ გვინდა გამოვიყენოთ საზღვრისთვის, უნდა იყოს სპეციალურად დამზადებული: 4 მინი სურათი კუთხეებისთვის და 4 სურათი გვერდებისთვის. ასეთი სურათის მაგალითი:

ამ შემთხვევაში ცენტრალური ნაწილი დარჩა თეთრი (რადგან არ გვინდა, რომ იგი მოხვდეს ელემენტის ფონზე). სურათის მაგალითი შევსებული ცენტრალური ნაწილით:

მნიშვნელობა slice მიუთითებს ბრაუზერს, სურათის რომელი ნაწილები წავა კუთხეებზე, ხოლო რომელი გვერდებზე (და რომელი ნაწილი იქნება ცენტრალური). კუთხეებზე მიდის 4 ნაწილი, გვერდებზე მიდის 4 ნაწილი და ერთი ნაწილი (ცენტრალური) მიდის ელემენტის ფონზე (არასავალდებულო, საკვანძო სიტყვა fill).

სურათი "იჭრება" ნაწილებად შემდეგი გზით: მნიშვნელობისთვის slice მითითებულია ერთიდან ოთხ მნიშვნელობამდე. მოდით გავაანალიზოთ მაგალითზე. დაე, მითითებული იყოს შემდეგი მნიშვნელობები: 10 20 30 40 (პიქსელები px არ მითითებული, ეს იმით არის გამოწვეული, რომ სურათი შეიძლება იყოს რასტრული და ვექტორული). მნიშვნელობები ამბობს შემდეგს: 10 მოჭრილი ზემოდან, 20 მოჭრილი მარჯვნიდან, 30 მოჭრილი ქვემოდან, 40 მოჭრილი მარცხნიდან. სურათის რომელი ნაწილი მოხვდება მარცხენა ზედა კუთხეში? ეს იქნება ნაწილაკი: 10 ზემოდან, 40 მარცხნიდან. მარჯვენა ზედა კუთხეში მოხვდება 10 ზემოდან, 20 მარჯვნიდან. და ასე შემდეგ.

ყველაზე ხშირად სურათი სიმეტრიულია (მაგალითად რომბების ზემოთ) და ჩვენ გვჭირდება კუთხეებზე თანაბარი ნაწილების მოჭრა. ამ შემთხვევაში მითითებულია ერთი მნიშვნელობა, რომელიც დააყენებს იდენტურ მანძილებს ყველა მხრიდან. ნარინჯისფერი რომბების მოსაჭრელად, ჩვენ მივუთითებთ slice-ს 26-ზე (რადგან ნარინჯისფერ რომბს აქვს ზომა 26px ზე 26px). ყვითელი რომბები მოხვდებიან საზღვრის ხაზებზე და მათთან მოხდება შემდეგი: ისინი ან გაიჭიმება მთელ ბლოკზე ან განმეორდებიან საზღვრის გასწვრივ (დამოკიდებულია მნიშვნელობაზე repeat):

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

<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 მეშვეობით.

ძველი ბრაუზერების მომხმარებლები (ან გამორთული სურათებით) დაინახავენ სტანდარტულ ჩარჩოს, რომელიც მითითებულია border-ში, ამიტომ მიზანშეწონილია მისთვის შესაფერისი სტილის და ფერის მითითება.

მნიშვნელობები

მნიშვნელობა	აღწერა
url(სურათის მისამართი)	სურათის მისამართი. უფრო დეტალურად იხილეთ `border-image-source`.
გაჭრა	მიუთითებს ბრაუზერს, სურათის რომელი ნაწილები წავა კუთხეებზე, ხოლო რომელი გვერდებზე (და რომელი ნაწილი იქნება ცენტრალური). შესაძლო მნიშვნელობები: `1`-დან `4`-მდე რიცხვი \| `1`-დან `4`-მდე პროცენტი. შესაძლებელია საკვანძო სიტყვის `fill` მითითება რიცხვების ან პროცენტების გარდა. უფრო დეტალურად იხილეთ `border-image-slice`.
სიგანე	თვისება აკონტროლებს ჩარჩოს ხილული ნაწილის სიგანეს, ცვლის მის მასშტაბს. თუ ეს მნიშვნელობა მეტია `border-width`-ის სიგანეზე, ჩარჩოს სურათი შევა შიგთავსის ქვეშ. შესაძლო მნიშვნელობები: CSS ერთეული \| პროცენტი \| რიცხვი \| `auto`. უფრო დეტალურად იხილეთ `border-image-width`.
გადაადგილება	საინტერესო თვისება, რომელიც საშუალებას აძლევს ჩარჩო ელემენტის ფარგლებს გარეთ გაიწიოს. უარყოფითი მნიშვნელობები არაა მხარდაჭერილი. შესაძლო მნიშვნელობები: CSS ერთეული (% (?)-ის გარდა) \| დადებითი რიცხვი \| auto. უფრო დეტალურად იხილეთ `border-image-outset`.
გამეორება	მიუთითებს, როგორ გაიმეოროს სურათი საზღვრებზე (არა კუთხეებზე): დაფაროს ან გაიჭიმოს. შესაძლო მნიშვნელობები: `stretch` \| `repeat` \| `round` \| `space`. უფრო დეტალურად იხილეთ `border-image-repeat`.

მნიშვნელობა ნაგულისხმევად: none 100%/1/0 stretch (url(სურათის მისამართი) გაჭრა/სიგანე/გადაადგილება გამეორება).

მაგალითი . border-image-repeat: მნიშვნელობა repeat

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

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

მაგალითი . border-image-repeat: მნიშვნელობა stretch

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

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

მაგალითი . border-image-repeat: მნიშვნელობა round

ამჟამად ნორმალურ მდგომარეობაში დაყენებულია მნიშვნელობა repeat, ხოლო მაუსის მიტანისას - round. დააკვირდით, რომ მიტანამდე საზღვარში ეტევა არა მთელი რაოდენობის რომბი, ხოლო მიტანის შემდეგ - მთელი. ასე მუშაობს round:

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

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

მაგალითი . border-image-repeat: ორი სიტყვა

მნიშვნელობა repeat სიგანისთვის და stretch სიმაღლისთვის:

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

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

მაგალითი . სურათის სიგანის დამთხვევა საზღვრის სიგანეს

გავზრდით border-width-ს მაუსის მიტანისას, ამ შემთხვევაში border-image-ის სისქე დავტოვებთ იგივეს. რომბები გაიჭიმება მთელ საზღვარზე:

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

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

მაგალითი . border-image-slice

ავიღოთ სხვა სურათი, რომელშიც სხვადასხვა ნაწილაკები არ არის თანაბარი:

მივუთითოთ, სურათის რომელი ნაწილების მოჭრა საჭიროა - 25% 30% 10% 20%. მუშაობს ეს ასე: 25% - ზემოდან მანძილი, 30% - მანძილი მარჯვნიდან, 10% - მანძილი ქვემოდან, 20% - მანძილი მარცხნიდან. სინამდვილეში ამ ნაწილაკებით ჩვენ ვჭრით კუთხეებს. ზედა მარცხენა კუთხე იქნება 25% სურათის ზემოდან, და 20% მარცხნიდან. ზედა მარჯვენა კუთხე იქნება 25% სურათის ზემოდან, და 30% მარჯვნიდან და ასე შემდეგ.

ასევე, თუ თქვენ მოიტანთ მაუსს ბლოკზე, მაშინ საკვანძო სიტყვა fill იმოქმედებს, და ცენტრალური ნაწილი სურათის გახდება ჩვენი ბლოკის ფონი:

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

#elem:hover {
	border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
	border-style: solid;
	border-width: 52px;
	border-image: url("image.png") 25% 30% 10% 20% stretch;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

მაგალითი

გავაკეთოთ გრადიენტური საზღვარი წრფივი გრადიენტის მეშვეობით:

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

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

მაგალითი . border-image-width

დავაყენოთ მნიშვნელობა border-image-width 2-ზე (საზღვრის სურათი გახდება 2-ჯერ დიდი თავად საზღვარზე) მაუსის მიტანისას ელემენტზე (26/2 - მითითებულია ხაზის შემდეგ, რომლის დროსაც 26 - ეს არის მნიშვნელობა border-image-slice-ის). დააკვირდით, რომ თავად საზღვარი არ გაიზარდა, ხოლო საზღვრის სურათი - დიახ, რადგან ის შევა ტექსტის ქვეშ:

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

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

მაგალითი . border-image-outset

დავაყენოთ მნიშვნელობა border-image-outset 3-ზე მაუსის მიტანისას ელემენტზე. (26/1/2 - მითითებულია მეორე ხაზის შემდეგ, რომლის დროსაც 26 - ეს არის მნიშვნელობა border-image-slice-ის, ხოლო - 1 - border-image-width-ის):

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

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

იხილეთ აგრეთვე

თვისება border-image-source,
რომელიც აყენებს სურათის მისამართს საზღვრისთვის
თვისება border-image-slice,
რომელიც აყენებს სურათის დაყოფას საზღვრისთვის
თვისება border-image-repeat,
რომელიც აყენებს სურათის გამეორებას საზღვრისთვის
თვისება border-image-width,
რომელიც აყენებს სურათის ზომას საზღვრისთვის
თვისება border-image-outset,
რომელიც აყენებს სურათის გადაადგილებას საზღვრისთვის