Bagaimana untuk Mencipta Sudut Meja Bulat dengan CSS Sahaja?

Sudut Meja Bulat dengan CSS Sahaja

Mencipta sudut meja bulat ialah keperluan reka bentuk biasa. Begini cara untuk mencapai kesan ini menggunakan CSS tulen:

table {
  border-collapse: separate;
  border: 1px solid black;
  border-radius: 6px;
}

td, th {
  border-left: 1px solid black;
  border-top: 1px solid black;
}

th {
  background-color: blue;
  border-top: none;
}

td:first-child, th:first-child {
  border-left: none;
}

Pendekatan ini menggunakan sempadan berasingan untuk jadual dan sel. Dengan menetapkan jejari sempadan pada meja, sudut dibulatkan. Sempadan yang berasingan memastikan bahawa sel masih mempunyai tepi lurus. Sifat atas sempadan dialih keluar daripada pengepala jadual (th) untuk menjajarkannya dengan sempadan data jadual (td). Akhir sekali, sel pertama dalam setiap baris telah dibuang sempadan kirinya untuk melengkapkan kesan penjuru bulat.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Sudut Meja Bulat dengan CSS Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!