Meneroka API Cat CSS: Bentuk Bulat

Menguasai sudut bulat pada bentuk kompleks dengan CSS boleh mencabar. CSS Paint API menawarkan penyelesaian yang elegan! Artikel ini, sebahagian daripada siri "Meneroka CSS Paint API" kami, menunjukkan bagaimana untuk mencapai matlamat ini.

Meneroka Siri API Cat CSS:

• Bahagian 1: Kesan Pemecahan Imej
• Bahagian 2: Animasi Gumpalan
• Bahagian 3: Sempadan Poligon
• Bahagian 4: Bentuk Bulat (artikel ini)

Teknik ini, yang kini disokong oleh Chrome dan Edge, menyediakan pendekatan CSS yang bersih, memudahkan penyelenggaraan dan pemahaman kod.

Alternatif ke API Cat

Walaupun kaedah lain wujud untuk bentuk kompleks yang membulatkan, mereka sering melibatkan SVG dan cabaran sekarang untuk penyesuaian dan penyelenggaraan. Ini termasuk:

clip-path: path()

Pendekatan berasaskan SVG ini mudah jika bentuknya ditakrifkan, tetapi mengubah kelengkungan atau saiz memerlukan suntingan laluan kompleks.

Penapis SVG

Menggunakan penapis SVG, seperti yang dilihat dalam tutorial Kesan Gooey Lucas Bebber, membolehkan pembulatan sudut. Walau bagaimanapun, ia masih memerlukan kepakaran SVG yang signifikan untuk pelarasan.

Kaedah CSS sahaja Ana Tudor

Teknik CSS yang inovatif Ana Tudor menawarkan alternatif, tetapi ia boleh menjadi rumit untuk melaksanakan dan menyesuaikan diri untuk pelbagai senario, terutamanya dengan ketelusan atau imej.

Penyelesaian API cat CSS

CSS Paint API menyediakan penyelesaian yang lebih mudah diurus. Pendekatan ini memanfaatkan struktur yang sama dengan contoh sempadan poligon dalam artikel sebelumnya.

Persediaan CSS

Kami bermula dengan segi empat tepat yang mudah dan menentukan bentuk menggunakan pembolehubah --path , sama dengan clip-path: polygon() . Clippy boleh membantu menjana laluan ini.

 .box {
  paparan: blok sebaris;
  Ketinggian: 200px;
  Lebar: 200px;
  --Path: 50% 0,100% 100%, 0 100%;
  -Radius: 20px;
  -Webkit-mask: cat (bentuk bulat);
}

Pembolehubah --path mendefinisikan bentuk, dan --radius mengawal kelengkungan sudut.

Pelaksanaan JavaScript

Kod JavaScript menambah titik tengah ke segmen laluan dan menggunakan fungsi arcTo() untuk membuat sudut bulat yang lancar. Penggunaan titik kawalan arcTo() adalah penting. Kod ini melangkah melalui mata, mengira titik tengah dan memohon arcTo() untuk menghasilkan bentuk bulat. Had jejari dilaksanakan untuk mengelakkan limpahan dengan nilai radius yang besar.

(Kod JavaScript yang ditinggalkan untuk keringkasan, tetapi diterangkan secara terperinci dalam artikel asal)

Langkah terakhir melibatkan mengisi atau mengusap bentuk untuk mencapai kesan visual yang dikehendaki.

Kelemahan dan penyelesaian

Kelemahan utama adalah kawasan hoverable (menggunakan topeng mempengaruhi interaksi) dan potensi limpahan dengan nilai radius yang besar. Isu kawasan yang boleh ditangani ditangani dengan menggunakan topeng kedua pada elemen pseudo untuk sempadan, dan isu limpahan dikendalikan dengan mengehadkan radius secara dinamik berdasarkan geometri bentuk.

Melanjutkan fungsi

Pembolehubah --path dipertingkatkan untuk menerima nilai radius individu untuk setiap sudut, memberikan lebih banyak kawalan berbutir.

Contoh

Beberapa contoh mempamerkan fleksibiliti teknik ini: bentuk CSS, gelembung pertuturan, bingkai, pembahagi seksyen, menu navigasi, kesan gooey, dan bentuk morphing. Contoh -contoh ini menunjukkan kuasa dan fleksibiliti CSS Paint API untuk mewujudkan reka bentuk yang menarik dan mudah dipelihara secara visual.

Kesimpulan

CSS Paint API menawarkan kaedah yang kuat dan cekap untuk mewujudkan sudut bulat pada bentuk kompleks, mengatasi batasan pendekatan CSS dan SVG tradisional. Pelaksanaan dan fleksibiliti yang mudah menjadikannya alat yang berharga untuk reka bentuk web moden.

Atas ialah kandungan terperinci Meneroka API Cat CSS: Bentuk Bulat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!