Properti border-image

Properti border-image mengatur gambar untuk border, ini merupakan properti shorthand untuk properti border-image-source, border-image-slice, border-image-repeat, border-image-width dan border-image-outset. Sementara properti shorthand muncul di CSS lebih awal dari properti yang disingkat dan karena itu didukung dalam lebih banyak peramban lama.

Sintaksis

selektor {
	border-image: url(jalur ke gambar) offset/lebar/awal pengulangan;
}

Deskripsi

Gambar, yang ingin kita terapkan untuk border, harus diformat dengan cara khusus: 4 gambar mini untuk sudut dan 4 gambar untuk sisi. Contoh gambar seperti itu:

Dalam hal ini bagian tengah dibiarkan putih (karena kita tidak ingin bagian itu masuk ke latar belakang elemen). Contoh gambar dengan bagian tengah yang terisi:

Nilai slice memberi tahu peramban, bagian mana dari gambar yang akan digunakan untuk sudut, dan bagian mana untuk sisi (dan bagian mana yang akan menjadi tengah). Untuk sudut digunakan 4 bagian, untuk sisi digunakan 4 bagian dan satu bagian (tengah) digunakan untuk latar belakang elemen (opsional, kata kunci fill).

Gambar "dipotong" menjadi beberapa bagian berikut cara: untuk nilai slice ditentukan dari satu sampai empat nilai. Mari kita bahas dengan contoh. Misalkan nilai berikut ditentukan: 10 20 30 40 (piksel px tidak ditentukan, ini terkait dengan fakta bahwa gambar dapat berupa raster dan vektor). Nilai-nilai menunjukkan hal berikut: 10 potong dari atas, 20 potong dari kanan, 30 potong dari bawah, 40 potong dari kiri. Bagian mana dari gambar yang akan masuk ke sudut kiri atas? Ini akan menjadi bagian: 10 dari atas, 40 dari kiri. Ke sudut kanan atas akan masuk 10 dari atas, 20 dari kanan. Dan seterusnya.

Seringkali gambar simetris (seperti belah ketupat di atas) dan kita perlu memotong bagian yang sama untuk sudut. Dalam hal ini ditentukan satu nilai, yang akan mengatur offset yang sama dari semua sisi. Untuk memotong belah ketupat oranye, kita akan menentukan slice menjadi 26 (karena belah ketupat oranye berukuran 26px kali 26px). Belah ketupat kuning akan masuk ke garis border dan hal berikut akan terjadi pada mereka: mereka akan meregang ke seluruh blok atau akan berulang sepanjang border (tergantung pada nilai repeat):

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

Properti border-image tidak memungkinkan untuk menentukan ketebalan border elemen. Peramban hanya meregangkan gambar sepanjang border dengan lebar yang sudah ada. Jadi perlu ditentukan melalui properti border.

Pengguna peramban lama (atau dengan gambar yang dinonaktifkan) akan melihat bingkai standar, yang ditentukan dalam border, jadi masuk akal untuk mengatur gaya dan warna yang sesuai.

Nilai

Nilai	Deskripsi
url(Jalur ke gambar)	Jalur ke gambar. Lebih detail lihat `border-image-source`.
offset	Memberi tahu peramban, bagian mana dari gambar yang akan digunakan untuk sudut, dan bagian mana untuk sisi (dan bagian mana yang akan menjadi tengah). Nilai yang mungkin: dari `1` hingga `4` angka \| dari `1` hingga `4` persen. Melalui spasi dapat ditentukan kata kunci `fill` sebagai tambahan untuk angka atau persen. Lebih detail lihat `border-image-slice`.
lebar	Properti mengatur lebar bagian border yang terlihat, menskalakannya. Jika nilai ini lebih besar dari lebar `border-width`, gambar border akan merayap di bawah konten. Nilai yang mungkin: Satuan CSS \| persen \| angka \| `auto`. Lebih detail lihat `border-image-width`.
awal	Properti menarik, memungkinkan untuk memindahkan border di luar elemen. Nilai negatif tidak didukung. Nilai yang mungkin: Satuan CSS (kecuali % (?)) \| angka positif \| auto. Lebih detail lihat `border-image-outset`.
pengulangan	Menentukan cara mengulang gambar pada border (bukan pada sudut): menutupi atau meregangkan. Nilai yang mungkin: `stretch` \| `repeat` \| `round` \| `space`. Lebih detail lihat `border-image-repeat`.

Nilai default: none 100%/1/0 stretch (url(jalur ke gambar) offset/lebar/awal pengulangan).

Contoh . border-image-repeat: nilai repeat

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

Contoh . border-image-repeat: nilai stretch

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

Contoh . border-image-repeat: nilai round

Saat ini dalam keadaan normal diatur nilai repeat, dan saat hover - round. Perhatikan bahwa sebelum hover ke border dimasukkan bukan jumlah bilangan bulat belah ketupat, dan setelah hover - bilangan bulat. Begitulah cara kerja round:

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

Contoh . border-image-repeat: dua kata

Nilai repeat untuk lebar dan stretch untuk tinggi:

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

Contoh . Kesesuaian lebar gambar dengan lebar border

Kita akan tingkatkan border-width saat hover mouse, sementara ketebalan border-image akan dibiarkan sama. Belah ketupat akan meregang ke seluruh border:

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

Contoh . border-image-slice

Mari ambil gambar lain, di mana bagian-bagian yang berbeda tidak sama:

Tentukan, bagian mana dari gambar yang perlu dipotong - 25% 30% 10% 20%. Cara kerjanya seperti ini: 25% - offset dari atas, 30% - offset dari kanan, 10% - offset dari bawah, 20% - offset dari kiri. Intinya dengan potongan-potongan ini kita memotong sudut-sudut. Sudut kiri atas akan menjadi 25% dari atas gambar, dan 20% dari kiri. Sudut kanan atas akan menjadi 25% dari atas gambar, dan 30% dari kanan dan seterusnya.

Juga, jika Anda mengarahkan mouse ke blok, maka kata kunci fill akan aktif, dan bagian tengah gambar akan menjadi latar belakang blok kita:

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

Contoh

Mari buat border gradien menggunakan gradien linear:

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

Contoh . border-image-width

Atur nilai border-image-width menjadi 2 (gambar border akan menjadi 2 kali lebih besar dari border itu sendiri) saat hover mouse pada elemen (26/2 - ditentukan setelah garis miring, sementara 26 - adalah nilai border-image-slice). Perhatikan bahwa border itu sendiri tidak membesar, tetapi gambar border - ya, karena akan merayap di bawah teks:

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

Contoh . border-image-outset

Atur nilai border-image-outset menjadi 3 saat hover mouse pada elemen. (26/1/2 - ditentukan setelah garis miring kedua, sementara 26 - adalah nilai border-image-slice, dan - 1 - border-image-width):

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

Lihat juga

properti border-image-source,
yang mengatur jalur ke gambar untuk border
properti border-image-slice,
yang mengatur pemotongan gambar untuk border
properti border-image-repeat,
yang mengatur pengulangan gambar untuk border
properti border-image-width,
yang mengatur ukuran gambar untuk border
properti border-image-outset,
yang mengatur pergeseran gambar untuk border