Kehendak soalan dan skop
Anda bertanggungjawab ke atas komponen kad merentas pelayar. Pelayar moden boleh memaparkan bevel, scoop, dan squircle, manakala pelayar lama hanya memahami border-radius. Terangkan prasyarat untuk corner-shape, sandaran (fallback), serta pelan penerimaan visual dan interaksi.
Ini menguji geometri CSS, peningkatan progresif (progressive enhancement), dan kejuruteraan komponen. corner-shape mengubah suai bucu yang dihasilkan oleh border-radius sedia ada; ia tidak mempunyai kesan apabila jejari dinilai sebagai sifar. Asingkan lukisan (painting), susun atur kandungan, dan kawasan ketukan penuding dalam jawapan anda.
Perkara yang dinilai oleh penemu duga
Jawapan yang kukuh mengekalkan garis dasar border-radius yang boleh digunakan dan meletakkan peningkatan di sebalik pertanyaan ciri (feature query). Ia menerangkan susunan sudut satu hingga empat nilai, kelengkungan superellipse() positif dan negatif, kekangan jejari apabila bucu bertentangan bertindih, dan kesan visual terlukis mana yang mengikut bentuk tersebut.
Penemu duga juga mahu anda mengelak daripada menganggap bentuk tersebut sebagai klip kandungan (content clip). MDN menyatakan bahawa kandungan disusun mengikut kotak asal dan keadaan hover masih boleh berfungsi di luar sudut yang kelihatan, jadi kebolehlihatan fokus dan ujian ketukan memerlukan pemeriksaan berasingan.
Soalan penjelasan
Apakah rupa visual yang mesti dikekalkan oleh pelayar lama
Jika kad berbucu bulat mencukupi, kekalkan border-radius. Jika geometri jenama mesti sepadan secara tepat, sandaran SVG atau pseudo-elemen akan menambah kos penyelenggaraan dan pemaparan (rendering).
Adakah bentuk tersebut mentakrifkan sempadan interaksi
Sahkan sama ada pautan, butang, atau sasaran seret mesti sepadan dengan garis bentuk yang kelihatan. Bentuk bucu CSS tidak semestinya mengubah ujian ketukan kandungan atau peristiwa, jadi tangkapan skrin sahaja tidak mencukupi.
Adakah animasi dan RTL diperlukan
Semak sama ada pelayar sasaran menginterpolasi superellipse() dan mematuhi reduced-motion. Utamakan sifat bucu logik untuk susun atur pelbagai bahasa daripada menganggap bahagian atas kiri fizikal sebagai permulaan sebaris (inline start).
Jawapan 30 saat
“Saya bermula dengan border-radius sebagai garis dasar dan meletakkan corner-shape di dalam @supports. Sifat ini mengubah lukisan jejari sedia ada, bukan susun atur kandungan; pelayar mengekang jejari apabila bucu bertentangan bertindih, jadi saya menguji saiz yang ekstrem. Saya mengesahkan gelang fokus, kawasan ketukan, dan limpahan (overflow) secara berasingan, serta menyediakan sandaran ciri dan reduced-motion untuk animasi.”
Penyelesaian langkah demi langkah
Langkah 1: Wujudkan garis dasar yang boleh diturunkan taraf dengan baik
Tulis gaya asas terlebih dahulu supaya kad mengekalkan sempadan (border), latar belakang, bayang-bayang, dan bucu bulat tanpa sifat baharu tersebut. Tambahkan peningkatan di sebalik pertanyaan ciri:
.card {
border-radius: 24px;
background: var(--surface);
box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}
@supports (corner-shape: scoop) {
.card {
corner-shape: scoop notch;
}
}Pelayar yang tidak menyokong akan mengabaikan pengisytiharan yang tidak dikenali dan mengekalkan garis dasar. Jangan letakkan kontras, teks yang boleh dibaca, atau arahan penting hanya dalam lapisan peningkatan.
Langkah 2: Terangkan pemetaan nilai dan prasyarat
Satu nilai terpakai pada keempat-empat bucu; dua nilai membentuk pasangan pepenjuru; tiga nilai menetapkan nilai ketiga pada bahagian bawah kanan; empat nilai memetakan bahagian atas kiri, atas kanan, bawah kanan, dan bawah kiri mengikut arah jam. corner-shape bergantung pada border-radius, jadi jejari sifar tidak menghasilkan sebarang bentuk.
Nilai nombor superellipse() mengawal kelengkungan, dengan arah positif dan negatif menghasilkan bentuk cembung dan cekung. Dalam temu duga, nyatakan bahawa nama sintaks mesti disahkan terhadap output yang dipaparkan dalam pelayar sasaran dan bukannya disimpulkan daripada label alat reka bentuk.
Langkah 3: Kendalikan pertindihan dan sempadan lukisan
Apabila jejari dan bentuk bucu yang bertentangan bertindih, pelayar akan mengekang jejari untuk mengelakkan pertembungan geometri. Uji kad sempit, peratusan jejari ekstrem, dan kandungan padat supaya teks, latar belakang, sempadan, dan bayang-bayang kekal koheren.
Latar belakang, sempadan, garis luar (outline), bayang-bayang kotak (box shadow), limpahan, dan penapis latar (backdrop filter) secara amnya mengikut bentuk bucu. Kandungan masih mengikut model kotak. Jika imej atau kawasan interaksi benar-benar memerlukan kliping, gunakan clip-path, topeng (mask), atau lapisan ketukan semantik yang berasingan.
Langkah 4: Uji interaksi dan kebolehcapaian
Gelang fokus mesti kekal kelihatan dan susunan papan kekunci, keadaan fokus, serta kawasan penuding harus sepadan merentas pelayar yang disokong dan pelayar sandaran. Bagi kad yang berfungsi sebagai pautan, kawasan ketukan segi empat tepat penuh selalunya lebih mesra pengguna berbanding garis bentuk tepat piksel; dokumentasikan pertukaran (trade-off) tersebut dalam ujian visual.
Langkah 5: Animasikan dan hormati arah logik
Kata kunci boleh diinterpolasi melalui nilai superelips yang setara, tetapi sahkan sokongan pelaksanaannya. Berikan tempoh masa yang jelas untuk hover, fokus, dan perubahan keadaan, serta lumpuhkan atau pendekkan di bawah prefers-reduced-motion: reduce. Gunakan sifat bucu logik dalam komponen pelbagai bahasa supaya RTL tidak membalikkan geometri yang diingini.
Langkah 6: Bina matriks keserasian
Rangkumi Chromium dengan sokongan, pelayar yang menyokong sebahagian atau tidak disokong, lebar sempit, teks panjang, imej, bayang-bayang, fokus papan kekunci, ujian ketukan sentuh, dan gerakan dikurangkan (reduced motion). Tangkap kedua-dua keadaan dipertingkat dan sandaran, sambil merekodkan sama ada pengisytiharan digunakan, susun atur berubah, dan sasaran peristiwa kekal konsisten.
Contoh jawapan berkualiti tinggi
Saya akan menjadikan border-radius sebagai garis dasar produk dan meletakkan corner-shape melalui @supports. Pelayar lama masih mendapat kad yang boleh digunakan, manakala bentuk baharu meningkatkan penampilan visual pada pelayar yang disokong. Saya akan mengesahkan jejari bukan sifar, menerangkan pemetaan satu hingga empat nilai, dan menguji kad sempit serta jejari ekstrem untuk kekangan pertindihan.
Saya tidak akan menganggap bentuk bucu sebagai kliping kandungan. Latar belakang, sempadan, dan bayang-bayang biasanya mengikut bentuk tersebut, tetapi susun atur kandungan dan ujian ketukan penuding memerlukan pemeriksaan berasingan; gelang fokus mesti kekal kelihatan. Animasi menerima cabang reduced-motion, RTL menggunakan sifat logik, dan matriks keserasian membandingkan tingkah laku visual, susun atur, papan kekunci, dan sentuhan berbanding hanya bergantung pada satu tangkapan skrin pelayar moden.
Kesilapan lazim
- Gejala → Mengisytiharkan
corner-shapetanpaborder-radius→ Sebab ia gagal → Tiada jejari berkesan bermakna tiada bentuk → Penyelesaian → Sediakan garis dasar bucu bulat terlebih dahulu. - Gejala → Menggunakan
corner-shapesebagai kliping imej → Sebab ia gagal → Kandungan masih mengikut kotak asal → Penyelesaian → Gunakan overflow, clip-path, atau topeng apabila kliping diperlukan. - Gejala → Menganggap bucu yang kelihatan mengecilkan kawasan ketukan → Sebab ia gagal → Peristiwa mungkin masih menyasarkan kotak asal → Penyelesaian → Uji papan kekunci, sentuhan, dan sasaran peristiwa secara berasingan.
- Gejala → Menguji pada satu saiz lebar sahaja → Sebab ia gagal → Jejari bertentangan boleh dikekang dalam bekas yang sempit → Penyelesaian → Sertakan saiz ekstrem dan teks panjang.
- Gejala → Menunjukkan kad kosong dalam pelayar yang tidak disokong → Sebab ia gagal → Peningkatan dianggap sebagai penggayaan penting → Penyelesaian → Gunakan pertanyaan ciri di atas garis dasar yang stabil.
Soalan susulan dan jawapan
Soalan susulan 1: Apakah yang berlaku apabila border-radius menggunakan peratusan?
Sahkan hasil pengiraan pelayar sasaran dan bukannya menukar peratusan kepada piksel tetap berdasarkan andaian semata-mata. Tangkap beberapa nisbah aspek untuk memeriksa pertindihan dan kesinambungan bayang-bayang. Jika bentuk jenama mesti stabil, gunakan jejari terkawal dalam lapisan peningkatan sambil mengekalkan sandaran asas.
Soalan susulan 2: Bagaimanakah gelang fokus boleh mengikut bentuk bucu?
Mula-mula kekalkan kebolehlihatan dan kontras, kemudian pertimbangkan untuk memadankannya dengan outline atau pseudo-elemen. Jika sesuatu teknik memotong gelang fokus, kekalkan gelang segi empat tepat daripada mengorbankan maklum balas visual papan kekunci.
Soalan susulan 3: Bagaimana jika corner-shape dan border-shape kedua-duanya diisytiharkan?
W3C dan MDN menetapkan bahawa border-shape menjadikan border-radius tidak berkesan, manakala corner-shape bergantung pada border-radius. Anggap kedua-duanya sebagai laluan geometri alternatif dan berikan sandaran yang jelas untuk laluan yang tidak digunakan daripada menganggap ia bertindih antara satu sama lain.
Soalan susulan 4: Bilakah anda akan mengelakkan sifat ini?
Elakkan sifat ini apabila liputan pelayar tidak mencukupi, bentuk tersebut menjejaskan kliping yang diperlukan, atau pasukan tidak dapat mengekalkan sandaran visual. border-radius yang stabil, SVG, atau pseudo-elemen boleh menjadi pilihan yang lebih baik apabila matlamat kebolehcapaian dan prestasi telah pun dipenuhi.