Properti border-image-slice CSS

definisi dan penggunaan

aturan border-image-slice menentukan penyanggaan dalam border gambar.

lihat pula:

tutorial CSS3:Garis border CSS3

contoh

tetapkan penyanggaan dalam border gambar:

div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}

gramatika CSS

border-image-slice: number|%|fill;

catatan:aturan ini menentukan penyanggaan dalam bagian atas, kanan, bawah, dan kiri gambar, gambar disuntuk menjadi sembilan area: empat pojok, empat sisi, dan area tengah. Jika belum menggunakan kata kunci fill, bagian gambar tengah akan diabaikan. Jika angka keempat diabaikan, maka sama dengan nilai kedua. Jika angka ketiga diabaikan, maka sama dengan nilai pertama. Jika angka kedua diabaikan, maka sama dengan nilai pertama.

nilai aturan

nilai deskripsi
number nilai angka, mewakili pixel di gambar (jika adalah gambar raster) atau koordinat vektor (jika adalah gambar vektor).
% nilai persen berdasarkan ukuran gambar: lebar gambar mempengaruhi penyanggaan horizontal, tinggi mempengaruhi penyanggaan vertikal.
fill tetapkan bagian tengah gambar border.

detil teknis

nilai standar: 100%
kejituan: tidak
versi: CSS3
gramatika JavaScript: object.style.borderImageSlice="50% 50%"

dukungan peramban

angka di tabel menunjukkan versi peramban pertama yang mendukung aturan ini penuh.

Chrome IE / Edge Firefox Safari Opera
15.0 11.0 15.0 6.0 15.0

lihat referensi border-image aturan.