元素上。這會帶來一種完全不同的視覺效果，更現(xiàn)代，也更模塊化。
.card-table { width: 90%; margin: 50px auto; border-spacing: 10px; /* 創(chuàng)建單元格之間的間隔 */ border-collapse: separate; /* 確保邊框不合并，為獨立陰影提供空間 */ } .card-table th, .card-table td { background-color: #fff; /* 為單元格設(shè)置背景色，否則陰影會穿透 */ padding: 15px; text-align: left; border-radius: 8px; /* 單元格自身的圓角 */ box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1); /* 每個單元格的獨立陰影 */ border: none; /* 移除單元格邊框，因為陰影已經(jīng)提供了視覺區(qū)分 */ } .card-table th { background-color: #e0e0e0; font-weight: bold; } /* 針對表格行的一些樣式，讓它們更清晰 */ .card-table tbody tr:nth-child(even) td { /* background-color: #f9f9f9; */ /* 可以在這里調(diào)整偶數(shù)行的背景色，如果需要 */ }
在這個例子中，border-spacing屬性非常關(guān)鍵，它在單元格之間創(chuàng)建了間距，這樣每個單元格的獨立陰影才不會相互重疊，視覺效果會非常清晰。同時，border-collapse: separate;是必須的，它確保了每個單元格的邊框是獨立的，而不是合并的。我個人覺得這種方式在一些數(shù)據(jù)展示面板上特別有用，能讓每一條數(shù)據(jù)都顯得更突出。
表格陰影效果如何適配不同主題或交互狀態(tài)？
讓表格陰影動態(tài)化，適配不同的主題或在用戶交互時提供反饋，是提升用戶體驗的重要一環(huán)。這主要通過CSS變量和偽類選擇器來實現(xiàn)。
1. 適配不同主題（使用CSS變量）：
你可以定義一組CSS變量來控制陰影的顏色、模糊度等，然后在不同的主題類下改變這些變量的值。
/* 默認主題 */ :root { --table-shadow-color: rgba(0, 0, 0, 0.15); --table-shadow-blur: 10px; } /* 暗色主題 */ .dark-theme { --table-shadow-color: rgba(255, 255, 255, 0.1); --table-shadow-blur: 8px; } .themed-table { width: 80%; margin: 50px auto; border-collapse: collapse; border-radius: 8px; overflow: hidden; box-shadow: 5px 5px var(--table-shadow-blur) var(--table-shadow-color); transition: box-shadow 0.3s ease; /* 添加過渡效果 */ } .themed-table th, .themed-table td { border: 1px solid #eee; padding: 12px 15px; background-color: var(--table-bg, #fff); /* 也可以用變量控制背景色 */ color: var(--table-text-color, #333); } .dark-theme .themed-table { --table-bg: #333; --table-text-color: #eee; border-color: #555; }
通過切換
或父元素的.dark-theme類，表格的陰影和背景色就會相應(yīng)改變。這種方式非常靈活，便于維護。
2. 交互狀態(tài)（hover和focus）：
當用戶鼠標懸停在表格行或單元格上時，通過改變陰影來提供視覺反饋，是常見的交互設(shè)計。
/* 針對整個表格行的hover效果 */ .interactive-table tbody tr { transition: box-shadow 0.3s ease, transform 0.3s ease; /* 平滑過渡 */ } .interactive-table tbody tr:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); /* 懸停時陰影更明顯 */ transform: translateY(-2px); /* 略微上浮，增加動感 */ cursor: pointer; } /* 如果是獨立單元格陰影，可以這樣 */ .card-table td:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* 單元格懸停陰影 */ transform: translateY(-1px); }
這里我給tr添加了box-shadow，而不是td或table，這樣當鼠標懸停在某一行時，整行都會有陰影效果，并且伴隨一個輕微的上浮動畫。這種細節(jié)能大大提升用戶感知到的界面“活力”。
在實際項目中，我發(fā)現(xiàn)這些細節(jié)處理，比如過渡效果、顏色變量，雖然看似簡單，但對最終的用戶體驗影響很大。它們讓表格不再是冰冷的數(shù)據(jù)羅列，而是能與用戶產(chǎn)生互動的界面元素。
|
