Sifat border-image

Sifat border-image menetapkan imej untuk sempadan, ia merupakan sifat singkatan untuk sifat border-image-source, border-image-slice, border-image-repeat, border-image-width dan border-image-outset. Sifat singkatan ini muncul dalam CSS lebih awal daripada sifat-sifat yang disingkatkan dan oleh itu disokong dalam lebih banyak pelayar lama.

Sintaks

selector {
	border-image: url(laluan ke imej) ofset/lebar/anjakan ulangan;
}

Penerangan

Imej yang kita ingin gunakan untuk sempadan, perlu diolah secara khas: 4 imej mini untuk sudut dan 4 imej untuk sisi. Contoh imej seperti itu:

Dalam kes ini bahagian tengah dibiarkan putih (kerana kita tidak mahu ia jatuh pada latar belakang elemen). Contoh imej dengan bahagian tengah yang diisi:

Nilai slice memberitahu pelayar, bahagian mana imej akan pergi ke sudut, dan yang mana ke sisi (dan bahagian mana yang akan menjadi tengah). Ke sudut pergi 4 bahagian, ke sisi pergi 4 bahagian dan satu bahagian (tengah) pergi ke latar belakang elemen (secara pilihan, kata kunci fill).

Imej "dipotong" kepada kepingan dengan cara berikut: untuk nilai slice dinyatakan satu hingga empat nilai. Mari kita lihat contoh. Katakan nilai berikut dinyatakan: 10 20 30 40 (piksel px tidak dinyatakan, ini kerana imej boleh jadi raster dan vektor). Nilai-nilai menyatakan yang berikut: 10 potong dari atas, 20 potong dari kanan, 30 potong dari bawah, 40 potong dari kiri. Bahagian imej mana yang akan masuk ke sudut kiri atas? Ia akan menjadi kepingan: 10 dari atas, 40 dari kiri. Ke sudut kanan atas akan masuk 10 dari atas, 20 dari kanan. Dan seterusnya.

Selalunya imej adalah simetri (seperti rombus di atas) dan kita perlu memotong kepingan yang sama untuk sudut. Dalam kes itu dinyatakan satu nilai, yang akan menetapkan ofset sama dari semua sisi. Untuk memotong rombus oren, kita akan nyatakan slice sebagai 26 (kerana rombus oren mempunyai saiz 26px kali 26px). Rombus kuning akan jatuh pada garisan sempadan dan yang berikut akan berlaku kepada mereka: mereka sama ada akan meregang ke seluruh blok atau akan berulang sepanjang sempadan (bergantung 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;
}

Sifat border-image tidak membenarkan menentukan ketebalan sempadan elemen. Pelayar hanya meregangkan imej sepanjang sempadan dengan lebar yang sedia ada. Oleh itu ia perlu ditetapkan melalui sifat border.

Pengguna pelayar lama (atau dengan imej dimatikan) akan melihat bingkai standard, yang ditetapkan dalam border, oleh itu adalah wajar untuk menetapkannya gaya dan warna yang sesuai.

Nilai

Nilai	Penerangan
url(Laluan ke imej)	Laluan ke imej. Untuk maklumat lanjut lihat `border-image-source`.
ofset	Memberitahu pelayar, bahagian mana imej akan pergi ke sudut, dan yang mana ke sisi (dan bahagian mana yang akan menjadi tengah). Nilai yang mungkin: dari `1` hingga `4` nombor \| dari `1` hingga `4` peratus. Melalui ruang boleh ditetapkan kata kunci `fill` sebagai tambahan kepada nombor atau peratus. Untuk maklumat lanjut lihat `border-image-slice`.
lebar	Sifat mengawal lebar bahagian bingkai yang kelihatan, menskalakannya. Jika nilai ini lebih besar daripada lebar `border-width`, imej bingkai akan merayap di bawah kandungan. Nilai yang mungkin: Unit CSS \| peratus \| nombor \| `auto`. Untuk maklumat lanjut lihat `border-image-width`.
anjakan	Sifat menarik, membenarkan mengalihkan bingkai di luar elemen. Nilai negatif tidak disokong. Nilai yang mungkin: Unit CSS (kecuali % (?)) \| nombor positif \| auto. Untuk maklumat lanjut lihat `border-image-outset`.
ulangan	Menentukan cara mengulangi imej pada sempadan (bukan pada sudut): jubin atau regang. Nilai yang mungkin: `stretch` \| `repeat` \| `round` \| `space`. Untuk maklumat lanjut lihat `border-image-repeat`.

Nilai lalai: none 100%/1/0 stretch (url(laluan ke imej) ofset/lebar/anjakan ulangan).

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

Sekarang dalam keadaan normal ditetapkan nilai repeat, dan ketika hover - round. Perhatikan bahawa sebelum hover ke dalam sempadan muat bukan jumlah integer rombus, dan selepas hover - integer. Begitulah cara round berfungsi:

<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 perkataan

Nilai repeat untuk lebar dan stretch untuk ketinggian:

<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 . Kesamaan lebar imej dengan lebar sempadan

Mari tingkatkan border-width ketika hover tetikus, sementara ketebalan border-image dibiarkan sama. Rombus akan meregang ke seluruh sempadan:

<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 imej lain, di mana kepingan berbeza tidak sama:

Nyatakan, bahagian mana dari imej perlu dipotong - 25% 30% 10% 20%. Cara ia berfungsi adalah: 25% - ofset dari atas, 30% - ofset dari kanan, 10% - ofset dari bawah, 20% - ofset dari kiri. Pada dasarnya dengan kepingan ini kita memotong sudut. Sudut kiri atas akan menjadi 25% dari atas imej, dan 20% dari kiri. Sudut kanan atas akan menjadi 25% dari atas imej, dan 30% dari kanan dan seterusnya.

Juga, jika anda mengarahkan tetikus pada blok, maka kata kunci fill akan berfungsi, dan bahagian tengah imej akan menjadi latar belakang blok kami:

<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 sempadan bergradien dengan bantuan 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

Mari tetapkan nilai border-image-width kepada 2 (imej sempadan akan menjadi 2 kali lebih besar daripada sempadan itu sendiri) ketika hover tetikus pada elemen (26/2 - dinyatakan selepas garis miring, dengan 26 - ini adalah nilai border-image-slice). Perhatikan bahawa sempadan itu sendiri tidak meningkat, tetapi imej sempadan - ya, kerana ia 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

Mari tetapkan nilai border-image-outset kepada 3 ketika hover tetikus pada elemen. (26/1/2 - dinyatakan selepas garis miring kedua, dengan 26 - ini 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

sifat border-image-source,
yang menetapkan laluan ke imej untuk sempadan
sifat border-image-slice,
yang menetapkan pemotongan imej untuk sempadan
sifat border-image-repeat,
yang menetapkan pengulangan imej untuk sempadan
sifat border-image-width,
yang menetapkan saiz imej untuk sempadan
sifat border-image-outset,
yang menetapkan anjakan imej untuk sempadan