Bagaimanakah saya boleh membuat sudut meja bulat dengan CSS sahaja?

Sudut Meja Bulat dengan CSS Sahaja

Mencipta sudut meja bulat ialah keperluan reka bentuk biasa. Walau bagaimanapun, mencapai ini semata-mata dengan CSS boleh mencabar. Artikel ini menyediakan penyelesaian untuk mencipta penjuru bulat untuk sel jadual tanpa menggunakan imej atau JavaScript.

Sampel CSS yang disediakan pada mulanya melaraskan jejari sempadan jadual untuk membundarkan penjuru. Walaupun ini berkesan mewujudkan sudut bulat, ia mengalih keluar sempadan sel. Penambahan sempadan pada sel individu menghasilkan sudut tidak bulat.

Penyelesaian yang disyorkan menggunakan sempadan berasingan untuk jadual dan sel. Dengan menetapkan sifat "runtuh sempadan" kepada "berpisah", kita boleh mengawal sempadan secara individu. Sempadan hitam pepejal kemudiannya digunakan pada jadual dan sel, memastikan jidar yang konsisten di seluruh jadual.

Untuk mencipta sudut bulat bagi jadual secara keseluruhan, kami menetapkan sifat "jejari sempadan" pada elemen jadual. Ini membulatkan semua sudut meja.

Walau bagaimanapun, untuk sel individu, kita perlu memastikan bahawa sempadan hanya digunakan pada bahagian tertentu. Untuk mencapai matlamat ini, kami mengubah suai sempadan untuk sel pertama dan pengepala pertama untuk mengalih keluar sempadan kiri. Ini menghasilkan sudut bulat yang diingini untuk sel sudut.

Dengan menggabungkan peraturan CSS ini, kami boleh mencapai sudut meja bulat yang diingini tanpa menjejaskan sempadan jadual atau bergantung pada teknologi tambahan seperti imej atau JavaScript.

Atas ialah kandungan terperinci Bagaimanakah saya boleh membuat sudut meja bulat dengan CSS sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!