利用 :has() 选择器，可以通过检测父元素是否包含溢出的子元素，动态切换 css 变量或类名，从而显示滚动阴影。具体做法是：在父容器上设置 :has(> .content:overflow)（需配合自定义属性或 js 辅助判断实际溢出状态，因为纯 css :has() 不直接支持 overflow 伪类，通常结合 scrollwidth > clientwidth 的 js 监听或 intersection-observer 模式，但现代 css 方案中更常见的是使用 mask-image 配合 :has() 控制可见性，或者直接使用 :has() 来应用一个带有渐变遮罩的样式，当子项存在且可能溢出时触发。这里提供一个基于 :has() 和 css 变量的纯视觉方案，假设我们通过 js 添加一个 .is-scrolling 类，或者利用 :has() 检测特定子元素的存在来模拟“有内容”的状态，但最准确的“自动”检测溢出仍需少量 js。不过，若仅讨论 css :has() 的能力，我们可以实现“当子元素存在且父元素被标记为可滚动时”显示阴影。为了完全自动化，我们通常需要一个微小的脚本来检测 scrollheight > clientheight 并添加类，然后 :has() 用于响应这个类的变化以调整阴影位置或强度。下面展示一个结合轻量 js 检测和 :has() 样式的完整实现。
如何检测子项溢出并应用基础阴影？
通过 JavaScript 监听 scroll 事件或使用 ResizeObserver 检测 scrollHeight 与 clientHeight 的差异，给父元素添加 .has-scroll 类。然后使用 :has(.has-scroll) 选择器来激活阴影效果。这确保了只有当内容真正溢出时才显示阴影，避免不必要的渲染开销。
<div class="scroll-container has-scroll">
<div class="content">
<p>Long content...</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/gongju/2905" title="CSS"><img
src="https://img.php.cn/upload/manual/000/969/633/6af2b1226ad9e733.png" alt="CSS" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/gongju/2905" title="CSS">CSS</a>
<p>CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。</p>
</div>
<a href="/xiazai/gongju/2905" title="CSS" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</div>
</div>
<script>
const container = document.querySelector('.scroll-container');
const checkScroll = () => {
const hasScroll = container.scrollHeight > container.clientHeight;
if (hasScroll) {
container.classList.add('has-scroll');
} else {
container.classList.remove('has-scroll');
}
};
container.addEventListener('scroll', checkScroll);
new ResizeObserver(checkScroll).observe(container);
checkScroll(); // Initial check
</script>预期结果：.scroll-container 在内容溢出时获得 .has-scroll 类，触发 CSS 规则。
如何利用:has()实现动态阴影位置跟随？
当用户滚动时，阴影应出现在滚动方向的前端。可以使用 :has() 结合 CSS 自定义属性来动态更新阴影的 background-position 或 transform。例如，通过 JS 计算滚动百分比，设置 CSS 变量 --scroll-percent，然后 :has() 选择器确保阴影层仅在需要时可见，并根据变量调整位置。
.scroll-container {
--shadow-opacity: 0;
position: relative;
}
.scroll-container.has-scroll {
--shadow-opacity: 1;
}
.scroll-container::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, transparent 100%);
opacity: var(--shadow-opacity);
transition: opacity 0.3s;
}
/* 使用 :has() 增强逻辑，例如当内部特定元素存在时改变阴影颜色 */
.scroll-container:has(.highlighted-item) {
--shadow-color: rgba(255, 0, 0, 0.2);
}预期结果：阴影随滚动淡入淡出，且可根据内部元素状态改变样式。
当子项高度恰好等于父项高度时阴影如何处理？
当 scrollHeight === clientHeight 时，.has-scroll 类不会被添加，因此阴影保持隐藏（opacity: 0）。这是符合预期的，因为没有溢出就不需要滚动指示。代码中的 checkScroll 函数严格比较两者大小，确保只有在真正溢出时才触发 UI 变化。
