Sifat border-image CSS

Definisi dan penggunaan

Sifat border-image adalah sifat singkat yang digunakan untuk menetapkan sifat berikut:

Jika nilai diabaikan, akan diatur ke nilai lalai.

Petikan:Gunakan sifat border-image-* untuk membuat butang yang indah dan dapat tahan tekan!

Lihat juga:

Panduan CSS3:BORDER3 CSS

Contoh

Tentukan gambar untuk memerahkannya di sekeliling elemen div:

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

Cuba sendiri

Lebih banyak contoh di bawah halaman.

Syarat CSS

border-image: sumber potong lebar keluaran ulang|awal|mewarisi;

Nilai sifat

Nilai Penerangan Pengujian
border-image-source Laluan ke gambar yang digunakan di border.
border-image-slice Pemindahan dalam image border.
border-image-width Lebar image border.
border-image-outset Kuantiti yang diluar kawasan image border.
border-image-repeat Apakah image border seharusnya diulang (repeated), diisi (rounded) atau dijauhkan (stretched). Pengujian

Butir teknologi

Nilai lalai: tidak ada 100% 1 0 stretch
Warisan: tidak
Versi: CSS3
Syarat Bahasa JavaScript: object.style.borderImage="url(border.png) 30 30 round"

Lebih banyak contoh

Butang Border-image
Contoh ini memaparkan bagaimana untuk membuat butang melalui sifat border-image.

Dukungan pereka

nombor di dalam tabel menunjukkan versi pereka paling awal yang menyokong sifat ini.

Chrome IE / Edge Firefox Safari Opera
16.0
4.0 -webkit-		 11.0 15.0
3.5 -moz-		 6.0
3.1 -webkit-		 15.0
11.0 -o-