Border-image xassəsi

border-image xassəsi sərhəd üçün şəkil təyin edir, bu xassə border-image-source, border-image-slice, border-image-repeat, border-image-width və border-image-outset xassələri üçün qısaldılmış xassədir. Bu qısaldılmış xassə CSS-də qısaldılan xassələrdən daha əvvəl yaranıb və buna görə də köhnə brauzerlərin daha çoxunda dəstəklənir.

Sintaksis

selektor {
	border-image: url(şəklin yolu) kəsilmə/qalınlıq/çıxış təkrar;
}

Təsvir

Sərhəd üçün tətbiq etmək istədiyimiz şəkil xüsusi şəkildə hazırlanmalıdır: künclər üçün 4 mini şəkil və tərəflər üçün 4 şəkil. Belə bir şəklin nümunəsi:

Bu halda mərkəzi hissə ağ olaraq qalıb (çünki elementin fonuna düşməsini istəmirik). Mərkəzi hissəsi doldurulmuş şəkil nümunəsi:

slice dəyəri brauzerə şəklin hansı hissələrinin künclərə, hansı hissələrinin tərəflərə gedəcəyini (və hansı hissənin mərkəzi olacağını) göstərir. Künclərə 4 hissə, tərəflərə 4 hissə və bir hissə (mərkəzi) elementin fonuna gedir (istəyə bağlı, fill açar sözü).

Şəkil aşağıdakı kimi hissələrə "kəsilir": slice dəyəri üçün bir dörd dəyərə qədər göstərilir. Gəlin bir nümunə ilə baxaq. Tutaq ki, aşağıdakı dəyərlər göstərilib: 10 20 30 40 (piksel px göstərilmir, bu ona görədir ki, şəkil həm rastr həm də vektor ola bilər). Dəyərlər bunu deyir: 10 yuxarıdan kəs, 20 sağdan kəs, 30 aşağıdan kəs, 40 soldan kəs. Şəklin hansı hissəsi sol üst küncə düşəcək? Bu hissə olacaq: 10 yuxarıdan, 40 soldan. Sağ üst küncə 10 yuxarıdan, 20 sağdan düşəcək. Və s.

Çox zaman şəkil simmetrik olur (yuxarıdakı romblar kimi) və bizim künclər üçün bərabər hissələri kəsməyimiz lazımdır. Belə halda bir dəyər göstərilir, bu da bütün tərəflərdən eyni kəsilməni təyin edəcək. Narıncı rombları kəsmək üçün biz slice-ı 26 göstərərik (çünki narıncı romb 26px ölçüsündədir). Sarı romblar sərhəd xəttinə düşəcək və onlarla belə olacaq: ya bütün blok boyunca uzanacaq ya da sərhəd boyunca təkrarlanacaq (repeat dəyərindən asılı olaraq):

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

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

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

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

border-image xassəsi elementin sərhədinin qalınlığını göstərməyə imkan vermir. Brauzer sadəcə şəkli artıq olan eni olan sərhəd boyunca uzadır. Ona görə də onu border xassəsi ilə təyin etmək lazımdır.

Köhnə brauzerlərin istifadəçiləri (və ya şəkilləri söndürülmüş) border-da təyin olunmuş standarta çərçivə görəcəklər, ona görə də ona uyğun stil və rəng təyin etmək məntiqlidir.

Dəyərlər

Dəyər	Təsvir
url(Şəklin yolu)	Şəklin yolu. Ətraflı baxın: `border-image-source`.
kəsilmə	Brauzerə şəklin hansı hissələrinin künclərə, hansı hissələrinin tərəflərə (hansı hissənin mərkəzi olacağı) gedəcəyini göstərir. Mümkün dəyərlər: `1`-dən `4`-ə qədər rəqəm \| `1`-dən `4`-ə qədər faiz. Boşluqla birlikdə rəqəmlərə və ya faizlərə əlavə olaraq `fill` açar sözü də göstərilə bilər. Ətraflı baxın: `border-image-slice`.
qalınlıq	Xassə görünən çərçivə hissəsinin eninə nəzarət edir, onu miqyaslayır. Əgər bu dəyər `border-width` enindən böyükdürsə, çərçivə şəkli məzmunun altına sürüşər. Mümkün dəyərlər: CSS vahidləri \| faizlər \| rəqəm \| `auto`. Ətraflı baxın: `border-image-width`.
çıxış	Maraqlı xassə, çərçivəni elementin hüdudlarından kənara çıxarmağa imkan verir. Mənfi dəyərlər dəstəklənmir. Mümkün dəyərlər: CSS vahidləri (% istisna olmaqla (?)) \| müsbət rəqəm \| auto. Ətraflı baxın: `border-image-outset`.
təkrar	Sərhədlərdə şəkli necə təkrar etdirməyi göstərir (künclərdə yox): düzəmək və ya uzatmaq. Mümkün dəyərlər: `stretch` \| `repeat` \| `round` \| `space`. Ətraflı baxın: `border-image-repeat`.

Susmaya görə dəyər: none 100%/1/0 stretch (url(şəklin yolu) kəsilmə/qalınlıq/çıxış təkrar).

Nümunə . border-image-repeat: repeat dəyəri

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

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

Nümunə . border-image-repeat: stretch dəyəri

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

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Nümunə . border-image-repeat: round dəyəri

Hal-hazırda normal vəziyyətdə repeat dəyəri təyin edilib, sichqanın üzərinə gətirildikdə isə - round. Diqqət edin ki, sichqanı gətirməzdən əvvəl sərhədə tam olmayan sayda romb düşür, sichqanı gətirdikdən sonra isə tam. round belə işləyir:

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

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

Nümunə . border-image-repeat: iki söz

En üçün repeat dəyəri və hündürlük üçün stretch dəyəri:

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

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

Nümunə . Şəklin eni ilə sərhədin eninin üst-üstə düşməsi

Sichqanı gətirdikdə border-width-ı artıraq, eyni zamanda border-image qalınlığını eyni saxlayaq. Romblar bütün sərhəd boyunca uzanacaq:

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

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

Nümunə . border-image-slice

Gəlin başqa bir şəkil götürək, burada müxtəlif hissələr bərabər deyil:

Şəkildən hansı hissələrin kəsiləcəyini göstərək - 25% 30% 10% 20%. Bu belə işləyir: 25% - yuxarıdan kənarlaşma, 30% - sağdan kənarlaşma, 10% - aşağıdan kənarlaşma, 20% - soldan kənarlaşma. Əslində bu hissələrlə biz küncləri kəsirik. Yuxarı sol künc şəklin yuxarısından 25% və solundan 20% olacaq. Yuxarı sağ künc şəklin yuxarısından 25% və sağından 30% olacaq və s.

Həmçinin, əgər siz sichqanı blokun üzərinə gətirsəniz, fill açar sözü işləyəcək və şəklin mərkəzi hissəsi blokumuzun fonuna çevriləcək:

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

#elem:hover {
	border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
	border-style: solid;
	border-width: 52px;
	border-image: url("image.png") 25% 30% 10% 20% stretch;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Nümunə

Xətti qradiyent vasitəsilə qradiyent sərhəd edək:

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

#elem {
	background: green;
	border-image: linear-gradient(to bottom, red, blue) 30;
	border-width: 30px;
	border-style: solid;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Nümunə . border-image-width

border-image-width dəyərini 2 təyin edək (sərhəd şəkli özü sərhəddən 2 dəfə böyük olacaq) sichqanı elementin üzərinə gətirdikdə (26/2 - kəsikdən sonra göstərdik, bununla 26 - bu border-image-slice dəyəridir, 2 isə border-image-width-dır). Diqqət edin ki, sərhədin özü artmayıb, amma sərhəd şəkli artıb, çünki o, mətnin altına sürüşəcək:

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

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

Nümunə . border-image-outset

border-image-outset dəyərini 3 təyin edək sichqanı elementin üzərinə gətirdikdə. (26/1/3 - ikinci kəsikdən sonra göstərdik, bununla 26 - bu border-image-slice dəyəridir, 1 isə border-image-width-dır):

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

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

Həmçinin bax

border-image-source xassəsi,
sərhəd üçün şəklin yolunu təyin edir
border-image-slice xassəsi,
sərhəd üçün şəklin bölünməsini təyin edir
border-image-repeat xassəsi,
sərhəd üçün şəklin təkrarını təyin edir
border-image-width xassəsi,
sərhəd üçün şəklin ölçüsünü təyin edir
border-image-outset xassəsi,
sərhəd üçün şəklin sürüşməsini təyin edir