CSS 实用技巧

一些日常开发中很实用但容易被忽略的 CSS 技巧，不用 JS 也能实现各种效果。

1. 平滑滚动

给页面加一行 CSS，所有锚点跳转都丝滑过渡：

html { scroll-behavior: smooth; }

2. 卡片悬停微动效

鼠标悬停时卡片轻轻抬起：

.card {
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

3. 文字溢出省略

多行文本截断：

/* 单行 */
.single { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 多行（最多3行） */
.multi { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

4. 毛玻璃效果

.glass {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.3);
}

5. 加载动画

纯 CSS 旋转动画：

.spinner {
  width: 24px; height: 24px;
  border: 3px solid #eee;
  border-top-color: #d4846a;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

6. 响应式字体大小

/* clamp(最小值, 首选值, 最大值) */
.title { font-size: clamp(20px, 5vw, 40px); }

7. CSS Grid 卡片布局

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

一行代码实现自适应卡片布局，不需要 Media Query。

CSS 比你想象的要强大。很多以前需要 JS 实现的效果，现在 CSS 一行就搞定了。