CSS斑馬條紋是一種很常見的效果,通常用于表格或列表的后臺顯示,可以讓數據更加清晰易讀。下面是CSS斑馬條紋的實現方法:
table { border-collapse: collapse; } tr:nth-child(odd) { background-color: #f2f2f2; }
以上代碼首先設置了表格的邊框樣式為collapsed,這是為了邊框可以合并。然后使用了:nth-child(odd)偽類選中了奇數行,并設置了背景顏色為淺灰色。
如果想要改變斑馬條紋的顏色,可以修改background-color的顏色值。
除了表格,也可以通過CSS實現列表的斑馬條紋效果。下面是實現代碼:
li:nth-child(odd) { background-color: #f2f2f2; }
以上代碼使用了同樣的:nth-child(odd)偽類來選中奇數行的列表項,并設置了背景顏色。可以根據需要修改偽類和背景顏色來實現不同的效果。
上一篇css文本行距離
下一篇css文本顏色怎么調