【布局进阶】巧用 :has & drop-shadow 实现复杂布局效果 - ChokCoco
内容提要
本文探讨了如何使用 CSS 创建具有阴影效果的导航布局。通过不规则按钮和伪元素，结合 `filter: drop-shadow()` 实现按钮阴影效果。同时介绍了如何利用结构调整和 :has() 伪类连接导航与主体内容，以确保阴影效果的整体性。
延伸解读
为何选择 drop-shadow 而非 box-shadow
文章指出，对于由伪元素和径向渐变构成的不规则按钮，box-shadow 无法贴合其弯曲边缘，导致阴影不完整。而 filter: drop-shadow() 基于元素的 alpha 通道生成阴影，能准确勾勒出整个可见形状，包括弧形连接处。因此，在需要为不规则图形添加阴影时，drop-shadow 是更合适的选择。
利用 :has() 实现跨结构状态联动
由于导航与主体内容在 DOM 中分离，直接为两者添加阴影会导致效果割裂。文章通过 :has() 伪类，在 .g-nav 上监听 li 的 hover 状态，并借此控制 .g-main 内虚拟 .g-status 对应项的透明度，从而将内外结构连接起来，实现阴影的整体性。这展示了 :has() 在父选择器缺失场景下的实用价值。
虚拟结构 .g-status 的作用与优势
文章在 .g-main 内新增了与导航项一一对应的 .g-status 列表，通过绝对定位覆盖在导航位置，并赋予相同的不规则按钮样式。这样，导航按钮的视觉表现实际由 .g-status 承担，而 .g-main 只需添加一次 drop-shadow 即可让阴影覆盖整个区域。相比直接在共同父元素上加阴影，这种方案在结构复杂时更可控。
Q&A
如何使用 CSS 创建带阴影效果的导航布局？
可以通过不规则按钮和伪元素，结合 filter: drop-shadow() 来实现按钮的阴影效果。
为什么要使用 filter: drop-shadow() 而不是 box-shadow？
使用 filter: drop-shadow() 可以避免阴影效果不完整，尤其是在处理不规则形状时。
:has() 伪类在布局中有什么作用？
:has() 伪类可以连接导航与主体内容，确保阴影效果的整体性，并根据子元素的状态变化调整样式。
如何确保导航和主体内容的阴影效果一致？
通过增加 .g-status 结构，并将其与 .g-main 结合，确保两者的阴影效果一致。
在实现复杂布局时，有哪些关键步骤？
关键步骤包括设计不规则按钮形状、使用伪元素、应用 filter: drop-shadow() 以及利用 :has() 伪类连接结构。
如何处理 Hover 状态下的内容切换？
可以通过 :has() 伪类来实现实时的 Hover 状态连接内外结构，从而达到预期效果。
