Bagaimanakah border-image-slice berfungsi dengan latar belakang kecerunan dalam CSS?

Imej Sempadan dalam Latar Belakang Kecerunan: Memahami Nombor 80

Dalam CSS, imej sempadan membenarkan kami menggunakan imej raster atau vektor sebagai sempadan di sekeliling unsur. Apabila digunakan pada latar belakang kecerunan, seperti yang dilihat dalam kod yang disediakan, sintaks mungkin meninggalkan beberapa soalan tentang cara sifat border-image-slice berfungsi.

Menurut spesifikasi CSS, border-image-slice mewakili mengimbangi tepi dalam piksel untuk imej raster. Walau bagaimanapun, dalam kes latar belakang kecerunan, ia adalah relatif kepada saiz elemen.

Dalam contoh yang diberikan, nilai keratan imej sempadan ditetapkan kepada 80. Nilai ini adalah tanpa unit, yang bermaksud ia diandaikan berada dalam piksel. Jadi, dalam kes ini, 80px ialah saiz imej yang akan digunakan untuk mencipta sempadan.

Sifat lebar-imej sempadan mentakrifkan lebar sempadan. Dalam contoh ini, ia ditetapkan kepada 5em, iaitu kira-kira 5 kali saiz fon elemen. Ini bermakna bahawa sempadan akan menjadi 5em lebar pada semua sisi.

Kunci untuk memahami cara nilai ini berinteraksi adalah dengan menyedari bahawa imej awal diskalakan agar sesuai dengan saiz sempadan. Dalam kes ini, imej awal ialah latar belakang kecerunan. Jadi, latar belakang kecerunan akan diskalakan kepada lebar 80px dan tinggi 5em.

Harta keping-imej sempadan kemudiannya mentakrifkan cara imej berskala ini dihiris kepada sembilan kawasan. Kawasan ini kemudiannya diletakkan di sekeliling elemen seperti berikut:

• Kawasan atas dan kiri diletakkan sebagai penjuru atas/kiri sempadan.
• Kawasan bawah dan kanan diletakkan sebagai penjuru bawah/kanan sempadan.
• Kawasan di kedua-dua belah bahagian atas/bawah diregangkan agar sesuai dengan lebar sempadan.
• Kawasan di kedua-dua belah sebelah kiri /kanan diregangkan agar sesuai dengan ketinggian sempadan.

Jadi, nilai keping-imej sempadan 80px dalam contoh ini bermakna latar belakang kecerunan berskala akan dihiris kepada sembilan petak 80px. Petak ini kemudiannya akan diletakkan di sekeliling elemen seperti yang diterangkan di atas untuk membentuk sempadan.

Dengan melaraskan nilai sempadan-imej-hirisan dan sempadan-imej-lebar, anda boleh mengawal penampilan jidar. Bereksperimen dengan nilai yang berbeza boleh membantu anda mencapai kesan yang diingini untuk reka bentuk anda.

Atas ialah kandungan terperinci Bagaimanakah border-image-slice berfungsi dengan latar belakang kecerunan dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!