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