Radius sempadan bersyarat di CSS

Trik CSS ini, yang didokumentasikan oleh Ahmad Shadeed dan berasal dari Facebook's Codebase, secara dinamik menyesuaikan radius sempadan unsur berdasarkan lebarnya berbanding dengan pandangan. Keajaiban berlaku dalam satu baris CSS:

 .card {
  Radius sempadan: max (0px, min (8px, calc ((100vw - 4px - 100%) * 9999)));
} 

Logik teras membandingkan 100vw (lebar viewport) dengan 100% (lebar elemen). Biasanya, border-radius adalah 8px. Walau bagaimanapun, apabila lebar unsur mendekati lebar viewport (dalam toleransi kira -kira 4px), pengiraan menghasilkan nilai negatif. Fungsi max(0px, ...) dan min(8px, ...) , digabungkan dengan pengganda besar (9999), memastikan togol antara 0px dan 8px sempadan-radius, menghapuskan sebarang nilai pertengahan. Mengeluarkan pengganda (9999) menunjukkan peralihan beransur -ansur apabila lebar elemen mendekati lebar viewport.

Pendekatan ini menawarkan kelebihan ke atas pertanyaan @media :

• Container-Aware: Tidak seperti pertanyaan media yang bergantung pada lebar paparan tetap, teknik ini secara dinamik bertindak balas terhadap lebar elemen berbanding dengan viewport, bertindak sebagai bentuk pertanyaan kontena. Ia tidak perlu mengetahui saiz kad terlebih dahulu. Pertanyaan media akan bergantung kepada lebar yang telah ditetapkan.

• Fleksibiliti: Teknik "Fab Four" ini (seperti yang kadang -kadang dipanggil) amat berguna dalam pembangunan e -mel dan konteks lain di mana kawalan tepat terhadap respons susun atur adalah penting.

Pemaju menyerlahkan kesesuaiannya yang unggul berbanding pertanyaan media, menjadikannya alat yang berkuasa untuk senario reka bentuk yang responsif.

Atas ialah kandungan terperinci Radius sempadan bersyarat di CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!