Xüsusiyyət border-image-width

Xüsusiyyət border-image-width çərçivənin görünən hissəsinin enini idarə edir, onu miqyaslayır. Əgər bu dəyər border-width xüsusiyyətindən daha böyükdürsə, çərçivə şəkli məzmunun altına keçəcək.

Ətraflı məlumat üçün border-image xüsusiyyətinə baxın.

Sintaksis

cssselektor {
  border-image-width: CSS vahidləri | faizlər | ədəd | auto;
}

Dəyərlər

Susmaya görə dəyər: 1.

Nümunə . Ədəd

Elementin üzərinə siçan gətirildikdə border-image-width dəyərini 2 təyin edək. Bu zaman çərçivənin ölçüsü 26px*2 olacaq - border-width ilə təyin olunan enindən 2 dəfə çox. Bu zaman çərçivə mətnin altına keçəcək (bir növ fon kimi):

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

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

Результат:

Nümunə . border-image-repeat-i round olaraq dəyişək

Əvvəlki nümunədə siçan gətirildikdə çərçivədə tam sayda romb olmayacaq. Bunu düzəltmək üçün border-image-repeat xüsusiyyətini round dəyərinə təyin edək:

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

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

Результат:

Nümunə . Faizlər

Elementin üzərinə siçan gətirildikdə border-image-width dəyərini 50% təyin edək. Bu zaman çərçivənin ölçüsü blokun ölçüsünün 50%-i qədər olacaq (yəni sağ və sol çərçivələr bütün bloku örtəcək):

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

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

Результат:

Nümunə . Faizlər

Elementin üzərinə siçan gətirildikdə border-image-width dəyərini 30% təyin edək. Bu zaman çərçivənin ölçüsü blokun ölçüsünün 30%-i qədər olacaq:

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

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

Результат:

Nümunə . Piksel

Elementin üzərinə siçan gətirildikdə border-image-width dəyərini 50px təyin edək:

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

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

Результат:

Nümunə . Auto dəyəri

Elementin üzərinə siçan gətirildikdə border-image-width dəyərini auto təyin edək.

Siçan gətirilməmişdən əvvəl border-image-width 1 dəyərinə malikdir (susmaya görə). Nümunədə border-width xüsusi olaraq 52px, border-image-slice isə 26 dəyərində təyin olunub (auto effekti yalnız border-width border-image-slice-ə bərabər olmadıqda müşahidə olunar). border-image-width 1 dəyərinə malik olduğundan, çərçivə şəkli bütün border-width eni tutacaq, yəni 52px qədər uzanacaq. Siçan gətirildikdə border-image-width dəyəri auto olacaq və şəklin eni border-image-slice dəyərinə, yəni 26px-ə bərabər olacaq:

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

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

Результат:

Həmçinin bax