本文详解如何在自定义 YouTube 样式标签栏中，为按钮文字添加右侧线性渐隐效果——通过伪元素叠加透明度渐变层，而非直接对文字应用 background-clip: text，确保兼容性与视觉一致性。
本文详解如何在自定义 youtube 样式标签栏中，为按钮文字添加右侧线性渐隐效果——通过伪元素叠加透明度渐变层，而非直接对文字应用 `background-clip: text`，确保兼容性与视觉一致性。
在构建 YouTube 风格的推荐区上方导航栏时，常需实现「内容溢出时右侧自然淡出」的视觉效果——即当按钮组宽度超出容器，右侧文字逐渐透明，暗示可横向滚动。但直接对 <div class="button"> 中的文字设置 <code>background: linear-gradient() 并配合 background-clip: text; -webkit-text-fill-color: transparent 往往失效，原因在于：文字本身无独立背景层，且按钮背景色会遮盖渐变效果；同时 background-clip: text 对非内联元素或含 padding 的块级元素支持不稳定，尤其在 Safari 和旧版 Chrome 中易回退为纯色。
✅ 正确解法是采用 「容器遮罩层」策略：用一个绝对定位的伪元素（::after）覆盖在滚动容器上方，仅在其右侧区域施加从透明到不透明的水平渐变，从而“擦除”视觉上溢出部分的文字，实现平滑淡出。
以下是完整、可直接复用的实现方案：
<div id="bar-wrapper">
<div id="bar-scroll">
<div class="button" onclick="barActive(this)">Wszystkie</div>
<div class="button" onclick="barActive(this)">Źródło: Ixo Music</div>
<div class="button" onclick="barActive(this)">Podobne</div>
<div class="button" onclick="barActive(this)">Na żywo</div>
<div class="button" onclick="barActive(this)">Ostatnio przesłane</div>
<div class="button" onclick="barActive(this)">Obejrzane</div>
</div>
</div>
/* 外层容器：提供相对定位上下文 & 控制整体尺寸 */
#bar-wrapper {
position: relative;
width: 100%;
height: 2.5rem; /* 留出足够高度容纳按钮和遮罩 */
overflow: hidden; /* 关键：隐藏遮罩层超出部分，避免滚动条干扰 */
}
/* 滚动容器：内联布局 + 无滚动条 + 横向滚动 */
#bar-scroll {
display: flex;
align-items: center;
gap: 0.6em;
font-size: 0.9em;
white-space: nowrap;
padding: 0 1rem 0 0; /* 右侧预留空间给渐隐效果 */
overflow-x: auto;
scroll-behavior: smooth;
/* 隐藏滚动条（全浏览器兼容） */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
#bar-scroll::-webkit-scrollbar {
display: none; /* Chrome/Safari/Opera */
}
/* 按钮基础样式 */
.button {
background-color: #d3d3d3; /* rgb(211,211,211) */
color: #000;
border-radius: 0.8em;
padding: 0.4rem 0.8rem;
cursor: pointer;
min-width: 6rem;
text-align: center;
transition: background-color 0.2s;
}
.button:hover {
background-color: #c0c0c0;
}
.button.active {
background-color: #0f80ff;
color: white;
}
/* 渐隐遮罩层：覆盖在滚动容器上方右侧 */
#bar-wrapper::after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 80px; /* 渐隐区域宽度，可根据设计调整 */
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.9) 70%, rgba(255, 255, 255, 1) 100%);
pointer-events: none; /* 确保不拦截鼠标事件 */
z-index: 1;
}
? 关键要点说明：
-
#bar-wrapper必须设为position: relative，以使::after伪元素能相对于它定位； -
overflow: hidden在外层容器上设置，可防止遮罩层在极端缩放下溢出； - 渐隐宽度（
width: 80px）建议根据字体大小和容器最大可见宽度动态微调，通常60–100px范围效果自然； - 渐变方向为
90deg（左→右），起始透明 → 中段半透 → 末端纯白，与浅灰背景融合，营造“文字被柔和擦除”的错觉； -
pointer-events: none是必须项，否则遮罩层会阻挡用户点击按钮。
? 进阶提示： 若需响应式渐隐（如移动端缩短宽度），可用 CSS 自定义属性 + @media 查询动态修改 #bar-wrapper::after 的 width 和 background；若按钮含图标，建议统一使用 display: flex + gap 布局，并将图标设为 flex-shrink: 0 防止压缩变形。
此方案零依赖、纯 CSS 实现，兼容所有现代浏览器（Chrome 50+、Firefox 45+、Safari 10+、Edge 16+），且性能优异——无需 JS 计算滚动位置，也无需监听 resize 事件。
