Penjana Laluan Keratan CSS Clip-Path

Menjana kod laluan pemangkasan CSS clip-path secara visual, menyokong bentuk seperti poligon, bulatan dan elips, serta boleh memproses imej secara berkelompok

Laporan pepijat

Mod pelaksanaan pelayar: Data anda diproses dalam penyemak imbas dan tidak dimuat naik ke pelayan.

Kelajuan dan kestabilan: Kelajuan pemprosesan bergantung pada peranti dan pelayar anda. Untuk kerja kelompok besar, versi desktop mungkin lebih stabil.

Memuatkan alat, sila tunggu...

Jika alat dalam talian tidak dapat dimuatkan atau dijalankan, cuba alat desktop. https://tools.yikeaigc.com/

Penggunaan Alat

Kembali ke versi lama

Tetapkan laluan potong dahulu, kemudian salin kod atau proses imej pukal

Selepas memilih bentuk pratetap, seret titik kawalan poligon, atau tukar ke bulatan, elips, segi empat sisip dan laras parameter. Proses pukal akan guna laluan semasa. Jika memuat naik banyak imej, hanya 20 pertama dipaparkan, tetapi semua akan diproses.

Maklumat laluan semasa

Jenispolygon

Titik kawalan3

Petua: lengkapkan tetapan laluan dahulu, kemudian salin kod atau proses imej.

Pratonton langsung Dalam mod poligon, seret titik kawalan biru; koordinat akan menjana CSS serentak.

Koordinat: relatif kepada elemen, sudut kiri atas ialah 0% 0%. polygon(50% 0%, 100% 100%, 0% 100%)

Bentuk dan pratetap Pilih jenis dahulu, kemudian laras parameter

Jenis bentuk

Kategori pratetap

Parameter laluan Nilai menyokong peratusan

Teks koordinat

jejari

Pusat X

Pusat Y

Jejari mendatar

Jejari menegak

Pusat X

Pusat Y

上

Kanan

bawah

Zuo

Bucu bulat

Pratonton & output Latar hanya mempengaruhi pratonton dan eksport imej

Lebar pratonton(px)

Tinggi pratonton(px)

Warna A

Warna B

Sudut gradien

Pratonton imej

Papar sempadan elemen Sertakan awalan -webkit Jana pemilih kelas

Jana kod

Kod dikemas kini masa nyata mengikut tetapan.

Guna laluan semasa secara pukal Sila tetapkan laluan pada langkah sebelumnya, kemudian pilih pemprosesan imej.

Klik atau seret imej ke sini Menyokong format umum seperti JPG, PNG, WebP, GIF, BMP

Tiada imej dipilih.

Tetapan output PNG menyokong latar telus

Format output

Mod saiz

Had sisi panjang (px)

Lebar tersuai(px)

Tinggi tersuai(px)

Kualiti output92%

Luar potongan telus Gunakan laluan semasa

Menunggu proses.

Pratonton & hasil imej Selepas muat naik, 20 imej pertama dipaparkan; pemprosesan merangkumi semua fail.

Imej menunggu diproses0 imej

Pilih imej untuk lihat lakaran kecil.

Hasil proses0 imej

Lakaran kecil hasil dipaparkan selepas selesai.

Arahan

Arahan Penggunaan Perisian

Reka bentuk laluan pangkasan: Selepas masuk ke alat, pilih jenis bentuk terlebih dahulu dalam langkah “Reka Bentuk Laluan”; anda boleh menggunakan poligon, bulatan, elips atau segi empat tepat inset.
Pilih bentuk pratetap: Anda boleh memilih pratetap daripada bentuk asas, anak panah dan ikon, serta bentuk hiasan, kemudian laraskan parameter mengikut keperluan.
Edit parameter laluan: Untuk poligon, anda boleh menyeret titik kawalan atau memasukkan koordinat peratusan dalam kotak teks koordinat; untuk bulatan, elips dan segi empat tepat inset, anda boleh terus mengisi jejari, titik tengah, margin dan bucu bulat.
Tetapkan kesan pratonton: Anda boleh melaraskan lebar dan tinggi pratonton, warna gradien, sudut gradien, atau memilih imej sebagai kandungan pratonton.
Salin kod CSS: Selepas mengesahkan kesan, klik “Salin clip-path” atau “Salin CSS”; anda boleh memilih sama ada untuk memasukkan awalan -webkit dan pemilih kelas.
Proses imej secara pukal: Klik “Langkah seterusnya: Pemprosesan pukal”, pilih beberapa imej, tetapkan format output, kualiti dan mod saiz, kemudian mula memproses.
Muat turun hasil: Selepas pemprosesan selesai, klik “Muat turun semua hasil ZIP”; fail output akan cuba menggunakan nama fail asal, dan nombor akan ditambah secara automatik jika terdapat nama yang sama.

Soalan Lazim

J: clip-path digunakan untuk memangkas elemen kepada bentuk tertentu, dan sering digunakan untuk paparan imej berbentuk khas, reka bentuk tepi kad, bentuk butang, grafik hiasan laman web dan kesan interaktif.

J: polygon menjana poligon melalui beberapa titik koordinat; circle menjana kawasan pangkasan berbentuk bulatan; ellipse menjana kawasan pangkasan berbentuk elips; inset menjana segi empat tepat inset dan menyokong parameter bucu bulat.

J: Koordinat dinyatakan dalam peratusan, contohnya 50% 0% mewakili posisi tengah bahagian atas elemen, manakala 100% 100% mewakili penjuru kanan bawah. Setiap titik dipisahkan dengan koma dan sekurang-kurangnya 3 titik diperlukan.

J: -webkit-clip-path digunakan untuk keserasian dengan sesetengah persekitaran enjin WebKit. Untuk meningkatkan julat penyesuaian, anda boleh mengekalkan kedua-dua penulisan berawalan dan penulisan standard.

Jawapan: Anda boleh memilih format imej biasa sebagai input, manakala output menyokong PNG, JPEG dan WebP. PNG sesuai untuk mengekalkan kawasan lutsinar, JPEG sesuai untuk menghasilkan fail yang lebih kecil, dan WebP sesuai untuk mengimbangi saiz fail dan kualiti imej.

Jawapan: Alat ini akan cuba mengekalkan nama fail asal dan menggantikan sambungan fail mengikut format output. Jika terdapat fail dengan nama yang sama, nombor akan ditambahkan selepas nama fail untuk mengelakkan hasil saling menimpa.