🎯 居中万能公式
/* Flexbox 居中 */
.parent { display: flex; justify-content: center; align-items: center; }
/* Grid 居中 */
.parent { display: grid; place-items: center; }📐 等宽多列布局
/* Grid 自动填充，最小200px */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }🖱️ 悬停缩放效果
.card { transition: transform 0.3s ease; }
.card:hover { transform: scale(1.05); }📏 文本超出省略号
.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* 多行省略 */
.multi-line { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }🎨 CSS 变量（自定义属性）
:root { --primary: #4f46e5; --radius: 8px; }
.btn { background: var(--primary); border-radius: var(--radius); }🌑 暗色模式
@media (prefers-color-scheme: dark) {
body { background: #1a1a2e; color: #e2e8f0; }
}📱 响应式断点
/* 手机 */
@media (max-width: 640px) { ... }
/* 平板 */
@media (min-width: 641px) and (max-width: 1024px) { ... }
/* 桌面 */
@media (min-width: 1025px) { ... }✨ 渐变背景
/* 线性渐变 */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
/* 径向渐变 */
background: radial-gradient(circle, #fff 0%, #ccc 100%);
🔲 圆角和阴影
.card {
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}🎭 伪元素装饰
.badge::before { content: '●'; color: #10b981; margin-right: 4px; }
.tooltip::after { content: attr(data-tip); position: absolute; ... }🔄 CSS动画基础
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.animate { animation: fadeIn 0.5s ease; }🔲 自定义滚动条
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }