Wie erstelle ich abgerundete Tischecken nur mit CSS?

Abgerundete Tischecken nur mit CSS

Das Erstellen abgerundeter Tischecken ist eine häufige Designanforderung. So erzielen Sie diesen Effekt mit reinem CSS:

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;
}

Dieser Ansatz verwendet separate Rahmen für die Tabelle und die Zellen. Durch Einstellen des Randradius auf dem Tisch werden die Ecken abgerundet. Die separaten Ränder sorgen dafür, dass die Zellen immer noch gerade Kanten haben. Die Eigenschaft „border-top“ wird aus den Tabellenköpfen (th) entfernt, um sie an den Rändern der Tabellendaten (td) auszurichten. Schließlich wird der linke Rand der ersten Zellen in jeder Zeile entfernt, um den abgerundeten Eckeneffekt zu vervollständigen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich abgerundete Tischecken nur mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!