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

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

Dəyərlər

Dəyər	Təsvir
CSS vahidləri	CSS vahidləri ilə verilmiş dəyər.
Faizlər	Çərçivə tətbiq olunan blokun ölçüsünə nisbətdə faiz dəyərləri.
Ədəd	`border-width` dəyərinin vurulduğu ədədi dəyər.
`auto`	Açar söz. Əgər verilirsə, dəyər uyğun `border-image-slice` dəyərinə bərabərdir. Əgər uyğun ölçü yoxdursa, `border-width` dəyəri istifadə olunur, bu zaman şəkil çərçivə küncünün tamamını doldurur və məzmunun altına keçir. Daha yaxşı başa düşmək üçün nümunələrə baxın.

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):

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

#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:

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

#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):

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

#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:

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

#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:

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

#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:

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

#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

çərçivə şəkli üçün qısa yazılış olan border-image xüsusiyyəti
çərçivə üçün şəkil yolunu təyin edən border-image-source xüsusiyyəti
çərçivə üçün şəkil bölməsini təyin edən border-image-slice xüsusiyyəti
çərçivə üçün şəklin təkrarını təyin edən border-image-repeat xüsusiyyəti
çərçivə üçün şəklin yerdəyişməsini təyin edən border-image-outset xüsusiyyəti