CSS 实用技巧

文字溢出处理

核心思路： 不靠 JS 判断，用 CSS 让浏览器自适应。

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

/* 多行省略 (3行) */
.ellipsis-3 {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; overflow: hidden;
}

/* 近似中间省略（如文件名）：省略号靠左，非真正中间截断 */
.ellipsis-mid {
  direction: rtl; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 真正的中间省略（如 `my-file...name.pdf`）需要 JS 方案，
   核心思路：计算可用宽度 → 二分查找截断位置 → 手动拼接 */

Mac Finder 的文件名省略是在中间截断——这对长文件名更友好，因为用户关心的是文件扩展名和开头。

宽高动态一致

正方形自适应： padding-top: 100% （百分比 padding 参照宽度计算）

.square { width: 100%; padding-top: 100%; position: relative; }
.square > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

box-sizing 核心理解

border-box 让 width 包含 padding 和 border，更符合直觉。建议全局设置：

*, *::before, *::after { box-sizing: border-box; }

纯 CSS 画各种形状

• 三角形：width: 0; height: 0; border: 10px solid transparent; border-top-color: red;
• 梯形：同上，但设 width（border 不重叠）
• 平行四边形：transform: skewX(-10deg);
• 扇形/弧形：border-radius + clip-path 或 background 渐变画弧

CSS 实现滚动阴影

知识点： 使用多层 background-image 的渐变 + background-attachment: scroll, local 实现滚动时自动显示/隐藏阴影。纯 CSS 无 JS。

.scroll-shadow {
  background:
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), transparent) top / 100% 14px,
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), transparent) bottom / 100% 14px,
    linear-gradient(#fff, #fff) 50% 50% / 100% calc(100% - 28px);
  background-repeat: no-repeat;
  background-attachment: local, local, scroll;
}

纯 CSS 无限滚动动效

使用 @keyframes + translateX(-50%) + 两组相同内容拼接实现无缝滚动。

平滑滚动到顶部

window.scrollTo({ top: 0, behavior: 'smooth' });

需要兼容旧浏览器可用 element.scrollIntoView({ behavior: 'smooth' })。

filter 属性实用场景

• filter: blur(5px) — 高斯模糊（毛玻璃背景）
• filter: grayscale(1) — 灰色（悼念模式）
• filter: drop-shadow(2px 2px 4px rgba(0,0,0,.5)) — 投影（比 box-shadow 更自然，跟随元素形状）

placeholder 样式

::placeholder { color: #999; font-size: 14px; }
::-webkit-input-placeholder { color: #999; } /* Safari 兼容 */

移动端适配 (postcss-px-to-viewport-8（或 postcss-mobile-forever 作为更现代的替代）)

自动 px → vw 转换，实现设计稿到移动端的等比缩放。

配置关键项：

• viewportWidth: 375 — 设计稿宽度
• selectorBlackList: ['.ignore'] — 不转换的 class
• include: /src/views/mobile/ — 只转换移动端目录

iOS 安全区域适配

iPhone 全面屏底部和顶部内容被遮挡。

padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);

需在 meta viewport 中添加 viewport-fit=cover。

position: fixed 在 iOS 小程序中失效

原因： 小程序 WebView 的 transform 会创建新的包含块，导致 fixed 定位失效。

解决：

• 避免在 fixed 元素的祖先使用 transform、perspective、filter
• 使用 page-meta 组件的 page-style 属性
• 在 uni-app 中可用 <page-meta :page-style="'overflow: hidden'">

解决 vant 中更改默认样式

使用 ::v-deep 或 /deep/ 穿透 scoped 样式：

::v-deep .van-field { padding: 10px; }

不要用 overflow: hidden 如何裁剪

替代方案：

• clip-path 精确裁剪
• contain: paint 创建 CSS containment
• border-radius 视觉裁剪（父元素设圆角 + overflow）