CSS 技巧片段

四段高频 CSS，每段三行以内核心代码，即抄即用。

1. 单行文字截断

场景：卡片标题过长，想显示成「一行 + 省略号」。

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

注意：只对块级/行内块元素生效；flex 子项要先加 min-width: 0 才能正常截断。

2. 多行截断（指定行数）

场景：摘要文字最多显示 2 行。

.clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 想几行改几行 */
  overflow: hidden;
}

注意：-webkit-line-clamp 虽是私有前缀，但所有现代浏览器都支持，放心用。

3. 毛玻璃卡片

场景：悬浮在图片/渐变背景上的半透明面板。

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

注意：底下的背景必须有足够的变化（图片/渐变），纯色背景上看不出效果；backdrop-filter 有性能成本，一个页面别叠太多。

4. 自定义滚动条

场景：页面默认滚动条太粗太丑（尤其 Windows）。

/* 细滚动条：本知识库在用同款思路 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
  background: #c9c5bd;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: #b0aca4; }
::-webkit-scrollbar-track { background: transparent; }

注意：只影响 WebKit 系浏览器；Firefox 用 scrollbar-width: thin; scrollbar-color: #c9c5bd transparent;。

5. 网格卡片自适应（响应式免媒体查询）

场景：卡片数量不定，希望自动排满一行、屏幕变窄自动换行。

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

注意：240px 是卡片最小宽度，按内容调；原理详解见布局基础。