Gambar perbatasan - Trik CSS | CSS Almanak 2024

border-image adalah properti singkatan yang memungkinkan Anda menggunakan gambar atau gradien CSS sebagai batas elemen.

.module ( border-image: url(border.png.webp) 25 25 round; )

The border-imageproperti dapat diterapkan untuk setiap elemen, kecuali elemen tabel internal (misalnya tr, th, td) ketika border-collapsediatur ke collapse.

Properti

Satu-satunya properti yang dibutuhkan untuk tulisan cepat border-imageadalah border-image-source. Properti lainnya secara default ke nilai awalnya jika tidak ditentukan. Ini adalah border-imageproperti secara berurutan:

`border-image-source`

.module ( border-image-source: url(border.png.webp); )

Properti ini menentukan sumber untuk gambar perbatasan. Ini bisa berupa URL, URI data, gradien CSS, atau SVG sebaris (meskipun dukungan terbatas untuk SVG sebaris, lihat catatan penggunaan SVG).

Nilai awalnya adalah none.

`border-image-slice`

.module ( border-image-source: url(border.png.webp); border-image-slice: 20; )

Nilai properti ini memberi tahu browser di mana harus "memotong" gambar untuk membuat potongan batas. Gambar dibagi menjadi 9 bagian - empat sudut, empat sisi, dan tengah.

Delapan hati dalam gambar "bingkai", diperbesar untuk menampilkan detail. Garis merah menunjukkan irisan.

Jika Anda berpikir itu terdengar tidak masuk akal, Anda berada di perusahaan yang baik. Ada diskusi panjang tentang subjek ini di blog Eric Myer beberapa tahun yang lalu di mana banyak pengembangan frontend yang hebat dipertimbangkan.

Dalam demo ini, hati diulang di sekitar perbatasan div. The border-image-sourceimage adalah gambar komposit dari delapan ikon hati yang sama, iris sehingga bentuk hati yang penuh digunakan pada setiap sisi dari elemen.

Lihat demo Gambar batas pena: batas ikon oleh CSS-Trik (@ css-trick) di CodePen.

Lebih Banyak Catatan Penggunaan

Meskipun dukungan untuk border-imagetelah ditingkatkan - ini didukung tanpa prefiks di semua versi browser saat ini - menyetel bordergaya fallback masih bermanfaat. Perbatasan fallback Anda akan ditampilkan di browser yang tidak mendukung border-image, atau jika gambar gagal dimuat.

Tidak seperti beberapa properti perbatasan lainnya, border-imagetidak dapat dianimasikan. Itu juga tidak bisa ditata dengan border-radius.

Jika Anda mendeklarasikan a border-image-sourcedan borderlebar atau border-image-widthtanpa irisan, seluruh gambar yang tidak dipotong akan ditempatkan di empat sudut elemen, diskalakan ke lebar yang Anda tentukan.

Terkait

border
border-collapse
box-sizing

Informasi Lebih Lanjut

border-image dalam CSS Background and Borders Module Level 3 CR
border-image di MDN
border-image.com, alat ini memungkinkan Anda mengunggah gambar dan bermain dengan irisan batas sampai Anda melakukannya dengan benar, lalu CSS dibuat untuk Anda.
Gambar Perbatasan Dijelaskan dari Dudley Storey.

Lebih Banyak Demo

Juga dari Dudley Storey, Gambar-batas praktis: bingkai foto responsif, demo CodePen. Ini adalah contoh yang baik dalam menggunakan gambar perbatasan secara masuk akal pada gambar responsif. Perhatikan bahwa "bingkai" dihapus pada ukuran layar yang lebih kecil.
Batas putus-putus yang sebenarnya menggunakan SVG dan gambar tepi, Pena oleh Lucas Lemonnier. Solusi untuk batas "titik-titik" persegi yang jelek, metode ini memberi Anda titik bulat yang nyata!
tombol gradien, Pena oleh pengguna CodePen GSSxGSS. Contoh cantik dari gradien linier sebagai gambar perbatasan.
Film Strip, Pena oleh Nick Pettit. Mungkin bukan demo yang paling praktis, ini adalah contoh yang menyenangkan dan berseni tentang apa yang dapat Anda lakukan border-image.

Dukungan Browser

border-imageawalnya membutuhkan prefiks vendor pada semua browser yang mendukungnya. Sekarang ini berfungsi tanpa prefiks di versi terbaru dari semua browser. Tabel ini menunjukkan dukungan dengan prefiks paling awal dan dukungan tanpa prefiks paling awal jika memungkinkan.