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

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

სინტაქსი

cssსელექტორი {
  border-image-repeat: stretch | repeat | round;
}

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

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

პარამეტრების რაოდენობა

შეუძლია მიიღოს 1 ან 2 პარამეტრი. თუ მითითებულია ორი პარამეტრი, მაშინ პირველი მათგან იქნება ზედა და ქვედა საზღვრისთვის, ხოლო მეორე პარამეტრი - მარცხენა და მარჯვენა საზღვრისთვის.

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

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

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

Результат:

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

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

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

Результат:

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

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

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

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

Результат:

მაგალითი . ორი სიტყვა

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

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

css#elem {
  border-image-repeat: repeat stretch;
  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;
}

Результат:

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