თვისება border-image-width

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

უფრო დეტალური ინფორმაციისთვის იხილეთ თვისება border-image.

სინტაქსი

სელექტორი {
	border-image-width: CSS ერთეულები | პროცენტები | რიცხვი | auto;
}

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

მნიშვნელობა	აღწერა
CSS ერთეულები	მნიშვნელობა მითითებულ CSS ერთეულებში.
პროცენტები	მნიშვნელობები პროცენტულად ბლოკის ზომის მიმართ, რომელსაც დაუსახელებია საზღვარი.
რიცხვი	რიცხვითი მნიშვნელობა, რომელიც მრავლდება `border-width`-ზე.
`auto`	საკვანძო სიტყვა. თუ ის არის მითითებული, მნიშვნელობა ტოლია შესაბამისი `border-image-slice`-ის. თუ შესაფერისი ზომა არ არის, გამოიყენება `border-width`-ის მნიშვნელობა, ამ შემთხვევაში სურათი ავსებს საზღვრის მთელ კუთხეს, კონტენტის ქვეშ შეჭრით. უკეთესი გაგებისთვის იხილეთ მაგალითები.

მნიშვნელობა ნაგულისხმევად: 1.

მაგალითი . რიცხვი

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

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

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

მაგალითი . შევცვალოთ border-image-repeat round-ზე

წინა მაგალითში მიტანისას საზღვარში იქნება არა მთელი რომბების რაოდენობა. გამოვასწოროთ ეს, border-image-repeat-ის მნიშვნელობაში round-ის დაყენებით:

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

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

მაგალითი . პროცენტები

დავსახელოთ border-image-width-ის მნიშვნელობა 50%-ზე ელემენტზე მაუსის მიტანისას. ამ შემთხვევაში საზღვარი გახდება 50% ზომის ბლოკის ზომიდან (ანუ ორი საზღვარი, მარჯვენა და მარცხენა, დაფარავს მთელ ბლოკს):

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

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

მაგალითი . პროცენტები

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

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

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

მაგალითი . პიქსელები

დავსახელოთ border-image-width-ის მნიშვნელობა 50px-ზე ელემენტზე მაუსის მიტანისას:

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

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

მაგალითი . მნიშვნელობა auto

დავსახელოთ border-image-width-ის მნიშვნელობა auto-ზე ელემენტზე მაუსის მიტანისას.

მიტანამდე border-image-width-ს აქვს მნიშვნელობა 1 (ნაგულისხმევად). მაგალითში სპეციალურად border-width მითითებულია 52px-ზე, ხოლო border-image-slice - მნიშვნელობაში 26 (ეფექტი auto-თან შეინიშნება მხოლოდ თუ border-width არ უდრის border-image-slice-ს). იმის გამო, რომ border-image-width-ს აქვს მნიშვნელობა 1, საზღვრის სურათი დაიკავებს მთელ border-width-ის სიგანეს, ანუ გაიჭიმება 52px-მდე. მიტანისას მნიშვნელობა border-image-width დაესახელება auto-ზე და სურათის სიგანე გახდება ტოლი border-image-slice-ის მნიშვნელობის, ანუ 26px-ის:

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

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

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

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