Bagaimanakah Saya Boleh Menggunakan `border-image-slice` dengan Berkesan dengan Linear-Gradient Borders?

Bagaimanakah imej sempadan berfungsi dengan Sempadan Kecerunan Linear?

Sifat keping imej sempadan menentukan ofset tepi untuk imej raster atau koordinat untuk imej vektor. Menurut spesifikasi CSS, nilai ini boleh menjadi nombor tanpa unit, mewakili piksel untuk imej raster atau koordinat relatif untuk imej vektor. Walau bagaimanapun, apabila menggunakan kecerunan, kerumitan tertentu timbul.

Imej Sempadan Kecerunan

Dalam contoh anda, anda telah menentukan imej sempadan kecerunan seperti berikut:

border-image: repeating-linear-gradient(45deg, #000, #000 1.5%, transparent 1.5%, transparent 5%) 80;

Di sini, 80 menentukan saiz kepingan imej. Apabila menggunakan kecerunan, saiz imej dianggap sama dengan saiz elemen. Lebar-imej sempadan mentakrifkan 9 kawasan tempat hirisan akan diletakkan (atau lebar sempadan digunakan jika tidak ditakrifkan).

Memahami keping-imej sempadan

Mengikut spesifikasi, sifat sempadan-imej-hirisan mempertimbangkan imej awal untuk mencipta kepingan. Apabila anda menentukan nilai tanpa unit (seperti 80 dalam contoh anda), ia ditafsirkan sebagai nilai piksel. Nilai peratusan diselesaikan terhadap saiz elemen.

Menghiris dan Kawasan

Untuk mencapai hasil yang optimum, kepingan hendaklah sama dengan kawasan yang ditakrifkan oleh sempadan -lebar-imej. Dalam kes anda, 80 mewakili 80 piksel kerana anda mempunyai sempadan 5em (iaitu 5x16px = 80px). Ini bermakna hirisan adalah saiz yang sama dengan jidar, memastikan kecerunan dijajarkan dengan betul.

Ringkasnya, apabila menggunakan imej jidar kecerunan, kepingan-imej sempadan harus sepadan dengan lebar-imej sempadan (atau jidar -lebar) untuk menjajarkan kepingan dengan sempurna dengan kawasan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan `border-image-slice` dengan Berkesan dengan Linear-Gradient Borders?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!