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

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

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

სინტაქსი

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

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

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

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

css#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-ით:

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

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

Результат:

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