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

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

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

სინტაქსი

სელექტორი {
	border-image-outset: დადებითი რიცხვი;
}

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

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

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

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

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

დავაყენოთ თვისების border-image-outset მნიშვნელობა 30px ელემენტზე მაუსის მიტანისას. ამ შემთხვევაში საზღვარი გადაინაცვლებს 30px-ით:

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

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

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

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