怎样用CSS伪元素实现文本溢出时的渐变虚化遮罩效果-css教程-PHP中文网

最稳的多行文本溢出渐隐方案是用::after伪元素加线性渐变背景，精准覆盖右下角、设pointer-events:none确保交互，并通过max-height与line-height控制行数，兼容主流浏览器。

怎样用css伪元素实现文本溢出时的渐变虚化遮罩效果

多行文本溢出用`::after`加渐变背景模拟虚化

纯 CSS 实现多行文本末尾“淡出”效果，最稳的路是不用 mask，而用 ::after 伪元素盖一层从不透明到透明的线性渐变。它不依赖浏览器对遮罩的解析差异，兼容 Firefox、Safari、旧版 Edge，也绕开了 -webkit-line-clamp 在 Safari 15.4 之前不稳定的问题。

关键不是“遮掉字”，而是“视觉上吃掉字尾”，所以必须让遮罩层精准贴在文字右下角，并且不影响选中和点击：

容器要设 position: relative，且不能写死 height（否则会硬截断）
用 max-height + line-height 控制显示行数，比如 max-height: 3em 对应 2 行（假设 line-height: 1.5）
::after 必须设 pointer-events: none，否则鼠标点不到下面的文字
渐变方向按溢出位置定：底部溢出用 to bottom，右侧溢出用 to right
遮罩高度建议略大于单行高，例如 height: calc(1.5em + 4px)，避免露底

`mask-image: linear-gradient()` 在 Firefox 和 Safari 中为什么失效

别急着写 mask-image: linear-gradient(to bottom, black, transparent)——它在 Firefox 中会被完全忽略，在 Safari 中可能因 transparent 被转成 #000 导致整个遮罩失效（全显）。根本原因在于：Firefox 当前（2026 年中）仍不支持渐变值作为 mask-image；Safari 要求渐变色必须是纯灰度（#000/#fff），rgba() 或 transparent 都算无效值。

如果你坚持用真实 alpha 遮罩（比如要做文字镂空或复杂裁剪），唯一可靠方案是 SVG <mask></mask>：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

把 <lineargradient></lineargradient> 写进 <svg><defs><mask id="fadeMask"></mask></defs></svg> 里
stop-color 只能用十六进制，如 #000（显）、#fff（隐）
CSS 中写 -webkit-mask: url(#fadeMask); mask: url(#fadeMask);
这个方案所有现代浏览器都认，但多了 SVG 结构，调试成本略高

右侧滚动标签栏的“文字淡出”怎么配渐变遮罩

YouTube 风格的横向滚动标签栏（如“全部”“游戏”“音乐”），需要在可视区域右侧做柔和渐隐，核心不是改文字颜色，而是用视觉叠加制造“文字自然消失”的错觉。因为 background: linear-gradient() 无法直接作用于 color，所以必须用伪元素。

典型结构是给标签容器加 ::after，覆盖在右边缘：

定位用 position: absolute; top: 0; right: 0; height: 100%; width: 60px;
背景写 background: linear-gradient(to right, rgba(255,255,255,0), #fff 70%);（白底时）
若背景非纯白，把 #fff 换成实际背景色，或改用 rgba(255,255,255,1) + 透明过渡
必须加 z-index: 1，防止被相邻标签遮住
如果容器本身有 overflow-x: auto，注意 ::after 不要盖住滚动条区域

容易被忽略的交互与性能细节

很多人做完遮罩发现文字点不了、选不了，或者滚动时遮罩“抖一下”，问题往往出在几个隐蔽点：

::after 缺少 pointer-events: none —— 这是最常见的交互中断原因
遮罩层没设 z-index，被兄弟元素（比如图标、边框）盖住，导致淡出效果看不见
用了 transform 或 opacity 动画但没加 will-change: opacity，低端设备滚动时掉帧
渐变遮罩宽度写死（如 width: 100px），响应式缩放后遮不住末尾，建议用 width: 2em 或 min(20%, 80px)
容器用了 display: -webkit-box 却忘了配 -webkit-box-orient: vertical，导致 -webkit-line-clamp 不生效