CSS表格圓角一直是前端開發(fā)中的一個(gè)常見問題。在網(wǎng)頁設(shè)計(jì)中,表格是一種最常用的布局結(jié)構(gòu)。表格的樣式不僅僅是文字表現(xiàn),也可以是外觀的美化,特別是表格邊框,可以用CSS來實(shí)現(xiàn)圓角邊框。
table { border-collapse: collapse; border-radius: 10px; overflow: hidden; } th, td { padding: 10px; } th { background-color: #f2f2f2; text-align: left; } td { background-color: #fff; } tr:nth-child(even) td { background-color: #f2f2f2; }
在以上代碼中,border-collapse
屬性被用來讓表格邊框合并,border-radius
屬性被用來設(shè)置邊框圓角像素?cái)?shù),overflow:hidden
屬性可以隱藏超出圓角的部分使表格邊框更圓潤。
以下是使用CSS樣式的表格圓角效果圖。
總之,CSS表格圓角是很容易實(shí)現(xiàn)的。只需幾行CSS代碼就可以讓表格邊框變得更美觀,并且讓網(wǎng)頁看起來更加精致。
上一篇css表格只顯示2行
下一篇css表格外無邊框