Sempadan-gambar - Trik CSS | CSS Almanac 2025

border-image adalah sifat ringkas yang membolehkan anda menggunakan imej atau kecerunan CSS sebagai sempadan elemen.

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

The border-imageharta boleh digunakan untuk mana-mana elemen, kecuali unsur Rajah dalaman (contohnya tr, th, td) apabila border-collapseditetapkan kepada collapse.

Hartanah

Satu-satunya harta yang diperlukan untuk border-imagesingkatan adalah border-image-source. Sifat lain lalai dengan nilai awalnya jika tidak ditentukan. Ini adalah border-imagesifat mengikut urutan:

`border-image-source`

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

Properti ini menentukan sumber untuk gambar sempadan. Ini boleh berupa URL, URI data, kecerunan CSS, atau SVG sebaris (walaupun sokongan terhad untuk SVG sebaris, lihat nota penggunaan SVG).

Nilai awal ialah none.

`border-image-slice`

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

Nilai-nilai harta tanah ini memberitahu penyemak imbas di mana "memotong" gambar untuk membuat potongan sempadan. Gambar dibahagikan kepada 9 bahagian - empat penjuru, empat sisi, dan tengah.

Lapan hati dalam gambar "bingkai", diperbesar untuk menunjukkan perincian. Garisan merah menunjukkan kepingan.

Sekiranya anda rasa itu tidak masuk akal, anda berada dalam hubungan baik Terdapat perbincangan panjang lebar mengenai topik ini di blog Eric Myer beberapa tahun yang lalu di mana banyak kemajuan pembangunan frontend.

Dalam demo ini, jantung berulang di sekitar sempadan div. The border-image-sourceimej adalah imej komposit lapan ikon hati yang sama, dihiris supaya bentuk hati penuh digunakan pada setiap sisi unsur.

Lihat demo gambar sempadan Pen: ikon sempadan oleh CSS-Tricks (@ css-tricks) di CodePen.

Nota Penggunaan Lebih Banyak

Walaupun sokongan untuk border-imagemeningkat - ia disokong tidak dapat diperbaiki pada semua versi penyemak imbas semasa - menetapkan bordergaya penggantian masih bermanfaat. Sempadan fallback anda akan ditunjukkan pada penyemak imbas yang tidak menyokong border-image, atau jika gambar gagal dimuat.

Tidak seperti beberapa sifat sempadan yang lain, border-imagetidak dapat dianimasikan. Ia juga tidak boleh digayakan border-radius.

Sekiranya anda menyatakan lebar border-image-sourcedan borderlebar atau border-image-widthtanpa potongan, keseluruhan gambar yang tidak berlapis akan diletakkan di empat sudut elemen, disesuaikan dengan lebar yang anda tentukan.

Berkaitan

border
border-collapse
box-sizing

Maklumat lanjut

border-image dalam Modul Latar Belakang dan Perbatasan CSS Tahap 3 CR
border-image di MDN
border-image.com, alat ini membolehkan anda memuat naik gambar dan bermain dengan potongan sempadan sehingga anda mendapatkannya dengan betul, kemudian menghasilkan CSS untuk anda.
Imej Sempadan Dijelaskan dari Dudley Storey.

Lebih Banyak Demo

Juga dari Dudley Storey, gambar sempadan praktikal: bingkai gambar responsif, demo CodePen. Ini adalah contoh yang baik untuk menggunakan gambar sempadan pada gambar yang responsif. Perhatikan bahwa "bingkai" dikeluarkan pada ukuran layar yang lebih kecil.
Sempadan bertitik benar menggunakan SVG dan gambar sempadan, Pen oleh Lucas Lemonnier. Penyelesaian untuk sempadan "putus-putus" yang jelek, kaedah ini memberi anda titik bulat yang sebenar!
butang kecerunan, GSSxGSS pengguna Pen oleh CodePen. Contoh cantik kecerunan linear sebagai gambar sempadan.
Jalur Filem, Pen oleh Nick Pettit. Mungkin bukan demo yang paling praktikal, ini adalah contoh menarik yang boleh anda lakukan border-image.

Sokongan Penyemak Imbas

border-imageawalan vendor pada asalnya diperlukan pada semua penyemak imbas yang menyokongnya. Sekarang ia berfungsi tidak dapat diperbaiki dalam versi terkini semua penyemak imbas. Jadual ini menunjukkan sokongan awalan paling awal dan sokongan tidak terpasang paling awal jika berkenaan.