Memahami Imej Sempadan dengan Latar Belakang Kecerunan

Pengenalan

Imej sempadan ialah CSS harta yang membolehkan anda menentukan sempadan tersuai menggunakan imej. Apabila digunakan dengan latar belakang kecerunan linear, ia boleh mencipta gaya sempadan yang rumit dan dinamik.

Memahami Slice-Imej Sempadan dengan Imej Sempadan Gradien

Imej sempadan -slice property menentukan offset untuk sembilan hirisan imej yang digunakan untuk mencipta sempadan. Dalam kes imej sempadan kecerunan, nilai tanpa unit untuk keping-imej sempadan mewakili pengimbangan piksel dari tepi elemen.

Pecahan Imej Sempadan Kecerunan:

Fungsi repeating-linear-gradient() mencipta latar belakang kecerunan dengan hentian berikut:

• 000: Permulaan kecerunan

• 000 1.5%: Mula jalur lutsinar

• lutsinar 1.5%: Hujung jalur lutsinar
• lutsinar 5%: Tamat kecerunan

Hubungan antara Border-Image-Width dan Border-Image-Slice

Dalam contoh yang diberikan, sempadan-imej-slice dinyatakan sebagai 80, yang dalam kes ini mewakili 80 piksel . Ini sama dengan lebar sempadan 5em, yang diterjemahkan kepada 80px dalam paparan semasa.

Mengira Sempadan-Imej-Slice

Kepingan-imej sempadan nilai dikira berdasarkan formula berikut:

border-image-slice = border-image-width - border-width

Jika lebar-imej sempadan tidak ditentukan, ia lalai kepada lebar sempadan.

Dalam kes ini:

border-image-slice = 80 (border-width) - 80 (border-image-width)

Impak Unit pada Border-Image-Slice

Apabila menggunakan nilai tanpa unit untuk border-image-slice, ia diukur dalam piksel. Walau bagaimanapun, jika anda menggunakan unit seperti em atau %, nilainya adalah relatif kepada saiz elemen.

Penjelasan Visual

[Masukkan lakaran di sini]

Lakaran menunjukkan hubungan antara keping-imej sempadan, lebar-imej sempadan dan lebar sempadan. Dengan melaraskan nilai keratan imej sempadan, anda boleh meletakkan semula hirisan imej dalam kawasan sempadan.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mencipta gaya sempadan yang rumit dengan menggabungkan imej sempadan dengan latar belakang kecerunan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!