border-image Özelliği

border-image özelliği kenarlık için bir resim belirler, bu özellik border-image-source, border-image-slice, border-image-repeat, border-image-width ve border-image-outset özellikleri için bir kısaltma özelliğidir. Bu kısaltma özelliği CSS'te, kısaltılan özelliklerden daha önce ortaya çıktığı için daha eski tarayıcılar tarafından daha iyi desteklenir.

Sözdizimi

seçici {
	border-image: url(resmin yolu) ofset/kalınlık/başlangıç tekrar;
}

Açıklama

Kenarlık için uygulamak istediğimiz resim özel bir şekilde düzenlenmelidir: köşeler için 4 mini resim ve kenarlar için 4 resim. Böyle bir resmin örneği:

Bu durumda orta kısım beyaz bırakılmıştır (çünkü öğenin arka planına gelmesini istemeyiz). Doldurulmuş orta kısma sahip bir resim örneği:

slice değeri tarayıcıya, resmin hangi kısımlarının köşelere gideceğini, hangilerinin kenarlara gideceğini (ve hangi kısmın orta kısım olacağını) belirtir. Köşelere 4 kısım gider, kenarlara 4 kısım gider ve bir kısım (orta kısım) öğenin arka planına gider (isteğe bağlı, fill anahtar kelimesi).

Resim şu şekilde parçalara ayrılır: slice değeri için bir ile dört arasında değer belirtilir. Bir örnekle inceleyelim. Aşağıdaki değerlerin belirtildiğini varsayalım: 10 20 30 40 (piksel px belirtilmez, bunun nedeni resmin hem raster hem de vektör olabilmesidir). Değerler şunu söyler: 10 üstten kes, 20 sağdan kes, 30 alttan kes, 40 soldan kes. Resmin hangi kısmı sol üst köşeye gider? Bu şu parça olacaktır: 10 üstten, 40 soldan. Sağ üst köşeye 10 üstten, 20 sağdan gider. Ve benzeri şekilde.

Çoğu zaman resim simetriktir (yukarıdaki elmaslar gibi) ve köşeler için eşit parçalar kesmemiz gerekir. Bu durumda, tüm taraflardan aynı ofseti ayarlayacak bir değer belirtilir. Turuncu elmasları kesmek için slice değerini 26 olarak belirtiriz (çünkü turuncu elmas 26px x 26px boyutundadır). Sarı elmaslar kenar çizgilerine denk gelecek ve onlara şu olacak: ya tüm blok boyunca uzayacaklar ya da kenar boyunca tekrarlanacaklar (repeat değerine bağlı olarak):

<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 özelliği, öğenin kenarlık kalınlığını belirtmeye izin vermez. Tarayıcı resmi, zaten mevcut genişliğe sahip kenar boyunca uzatır. Bu nedenle border özelliği ile ayarlanmalıdır.

Eski tarayıcı kullanıcıları (veya resimleri devre dışı bırakılmış olanlar) border içinde ayarlanmış standart çerçeveyi göreceklerdir, bu nedenle ona uygun stil ve renk vermek mantıklıdır.

Değerler

Değer	Açıklama
url(Resmin Yolu)	Resmin yolu. Ayrıntılar için `border-image-source`'a bakın.
ofset	Tarayıcıya, resmin hangi kısımlarının köşelere gideceğini, hangi kısımların kenarlara gideceğini (ve hangi kısmın orta kısım olacağını) belirtir. Olası Değerler: `1`'den `4`'e kadar sayı \| `1`'den `4`'e kadar yüzde. Boşlukla ayrılarak, sayılara veya yüzdelerle birlikte `fill` anahtar kelimesi belirtilebilir. Ayrıntılar için `border-image-slice`'a bakın.
kalınlık	Bu özellik, kenarlığın görünür kısmının genişliğini kontrol eder, onu ölçeklendirir. Bu değer `border-width` genişliğinden büyükse, kenarlık resmi içeriğin altına girer. Olası Değerler: CSS birimleri \| yüzdeler \| sayı \| `auto`. Ayrıntılar için `border-image-width`'a bakın.
başlangıç	Kenarlığı öğenin sınırlarının ötesine taşımaya izin veren ilginç bir özellik. Negatif değerler desteklenmez. Olası Değerler: CSS birimleri (% (?) hariç) \| pozitif sayı \| auto. Ayrıntılar için `border-image-outset`'a bakın.
tekrar	Resmin kenarlarda (köşelerde değil) nasıl tekrarlanacağını belirtir: döşenmiş mi yoksa uzatılmış mı. Olası Değerler: `stretch` \| `repeat` \| `round` \| `space`. Ayrıntılar için `border-image-repeat`'a bakın.

Varsayılan değer: none 100%/1/0 stretch (url(resmin yolu) ofset/kalınlık/başlangıç tekrar).

Örnek . border-image-repeat: repeat değeri

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

Örnek . border-image-repeat: stretch değeri

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

Örnek . border-image-repeat: round değeri

Şu anda normal durumda repeat değeri ayarlı, fareyle üzerine gelindiğinde ise - round değeri ayarlı. Fareyle üzerine gelmeden önce kenarlığa tam sayıda elmas sığmadığına, fareyle üzerine gelindikten sonra ise tam sayıda sığdığına dikkat edin. round işte böyle çalışır:

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

Örnek . border-image-repeat: iki kelime

Genişlik için repeat değeri ve yükseklik için stretch değeri:

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

Örnek . Resim genişliği ile kenarlık genişliğinin eşleşmesi

Fareyle üzerine gelindiğinde border-width değerini artıralım, bu sırada border-image kalınlığını aynı bırakalım. Elmaslar tüm kenarlık boyunca uzayacak:

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

Örnek . border-image-slice

Parçaların eşit olmadığı başka bir resim alalım:

Resmin hangi kısımlarının kesileceğini belirtelim - 25% 30% 10% 20%. Bunun çalışma şekli şudur: 25% - üstten ofset, 30% - sağdan ofset, 10% - alttan ofset, 20% - soldan ofset. Aslında bu parçalarla köşeleri kesiyoruz. Sol üst köşe, resmin üstünden 25% ve solundan 20% olacak. Sağ üst köşe, resmin üstünden 25%, ve sağından 30% olacak ve benzeri şekilde.

Ayrıca, fareyi bloğun üzerine getirirseniz fill anahtar kelimesi devreye girecek ve resmin orta kısmı bloğumuzun arka planı olacak:

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

Örnek

doğrusal degrade kullanarak gradyan kenarlık yapalım:

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

Örnek . border-image-width

border-image-width değerini 2 olarak ayarlayalım (kenarlık resmi kenarlığın 2 katı büyüklüğünde olacak). Bu, öğenin üzerine fare getirildiğinde olacak (26/2 - eğik çizgiden sonra belirtildi, 26 - border-image-slice değeridir). Kenarlığın kendisinin genişlemediğine, ancak kenarlık resminin genişlediğine ve metnin altına gireceğine dikkat edin:

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

Örnek . border-image-outset

border-image-outset değerini 3 olarak ayarlayalım. Bu, öğenin üzerine fare getirildiğinde olacak. (26/1/2 - ikinci eğik çizgiden sonra belirtildi, 26 - border-image-slice değeridir, - 1 - border-image-width değeridir):

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

Ayrıca Bakınız

kenarlık için resim yolunu belirleyen border-image-source özelliği
kenarlık için resim dilimlemeyi belirleyen border-image-slice özelliği
kenarlık için resim tekrarını belirleyen border-image-repeat özelliği
kenarlık için resim boyutunu belirleyen border-image-width özelliği
kenarlık için resim ofsetini belirleyen border-image-outset özelliği