【佈局進階】巧用 :has & drop-shadow 實現複雜佈局效果

最近，羣裏聊到了一個很有意思的佈局效果。大致效果如下所示，希望使用 CSS 實現如下所示的佈局效果：

正常而言，我們的 HTML 結構大致是如下所示：

<div class="g-container">
    <div class="g-nav">
        <ul>
            <li>Tab 1</li>
            <li>Tab 2</li>
            <li>Tab 3</li>
            <li>Tab 4</li>
        </ul>
    </div>
    <div class="g-main">
        <ul class="g-content">
            <li>...</li>
            <li>...</li>
            <li>...</li>
            <li>...</li>
        </ul>
    </div>
</div>

對於 Hover 導航 Tab 時候的內容切換，暫且不談。本文，我們核心想探討的是兩個點：

一是對於如下所示的不規則佈局，應該如何實現：

並且，這裏我們可能還需要給它加上陰影效果：

如何配合 Hover 動作，實現整個切換效果

帶着這兩個問題，我們一起來嘗試慢慢把這個效果實現。

藉助僞元素實現不規則按鈕

首先，我們需要實現這個效果：

這個，其實在很多篇文章都有提及過：

想一想，這裏其實就是豎向的 Chrome 分 Tab 的效果：

像是這樣：

我們對這個按鈕形狀拆解一下，這裏其實是 3 塊的疊加：

只需要想清楚如何實現兩側的弧形三角即可。這裏還是藉助了漸變 -- 徑向漸變，其實他是這樣，如下圖所示，我們只需要把黑色部分替換爲透明即可，使用兩個僞元素即可：

代碼如下：

<div class="outside-circle"></div>

.outside-circle {
    position: relative;
    background: #e91e63;
    border-radius: 10px 10px 0 0;

    &::before {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        left: -20px;
        bottom: 0;
        background: #000;
        background:radial-gradient(circle at 0 0, transparent 20px, #e91e63 21px);
    }
    &::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        right: -20px;
        bottom: 0;
        background: #000;
        background:radial-gradient(circle at 100% 0, transparent 20px, #e91e63 21px);
    }
}

即可得到：

我們照葫蘆畫瓢，即可非常輕鬆的實現豎向的相同的效果，示意圖如下：

利用 drop-shadow 實現按鈕陰影

好，接下來，我們需要給按鈕添加上陰影效果，像是這樣：

因爲使用了兩個僞元素，當前單個按鈕在 Hover 狀態下的大致代碼如下：


li {
    position: relative;
    width: 160px;
    height: 36px;
    border-radius: 10px 0 0 10px;
    background: #ddd;

    &::before,
    &::after {
        content: "";
        position: absolute;
        right: 0;
        border-radius: unset;
    }

    &::before {
        width: 20px;
        height: 20px;
        top: -20px;
        background: radial-gradient(circle at 0 0, transparent, transparent 19.5px, #ddd 20px, #ddd);
    }
    &::after {
        width: 20px;
        height: 20px;
        bottom: -20px;
        background: radial-gradient(circle at 0 100%, transparent, transparent 19.5px, #ddd 20px, #ddd);
    }
}

如果使用 box-shadow 肯定是不行的，整個效果就會露餡：

嘗試給按鈕添加一個 box-shadow: 0 0 5px 0 #333：

彎曲的連接處，明顯沒有陰影效果，怎麼解決呢？

嗯哼，老讀者一定也知道，這裏我們需要對整個可見部分添加陰影，需要使用 filter:drop-shadow()。

drop-shadow() 濾鏡的作用用於創建一個符合元素（圖像）本身形狀（alpha 通道）的陰影。其中，最爲常見的技巧，就是利用它生成不規則圖形的陰影。

因此，我們把上述的 box-shadow 替換成：filter: drop-shadow(0 0 5px #ddd)：

這樣，我們就實現了基於單個不規則按鈕的陰影效果。

但是，顯然事情還沒有結束。

修改佈局結構，再借助利用 drop-shadow 實現統一陰影

記得我們上面提到過的 HTML 的佈局嗎？正常而言，右側的主體內容和左側的導航，結構是分離的：

<div class="g-container">
    <div class="g-nav">
        <ul>
            <li>Tab 1</li>
            // ...
        </ul>
    </div>
    <div class="g-main">
        <ul class="g-content">
            <li>...</li>
            // ...
        </ul>
    </div>
</div>

因此，這裏最爲麻煩的地方在於，左側按鈕的陰影，需要和右側的主體內容連在一起！，所以當我們給右側的 .g-main 也添加上相同的 filter:drop-shadow() 時，整個效果會變得非常奇怪：

// 當前被 Hover 的 li
.g-nav li {
    filter: drop-shadow(0 0 5px #ddd)
}
// 右側的主體
.g-main {
    filter: drop-shadow(0 0 5px #ddd)
}

無論層級誰在上，整體陰影的展示都會瑕疵：

所以，如果想要實現整個元素的陰影是一整個的整體的效果，我們就不得不另闢蹊徑。

這裏，我們的思路如下：

可以嘗試在 .g-main 中，添加一組與 .g-nav 相同的結構，負責樣式層面的展示
把新增的結構，利用絕對定位，讓其與實際的導航位置重疊
在原本的 .g-nav 中，通過 :has() 僞類，傳遞實時的 Hover 狀態

基於此，我們需要改造一下我們的結構：

<div class="g-container">
    <div class="g-nav">
        <ul>
            <li>Tab 1</li>
            <li>Tab 2</li>
            <li>Tab 3</li>
            <li>Tab 4</li>
        </ul>
    </div>
    <div class="g-main">
        <ul class="g-status">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="g-content">
            <li>...</li>
            // ...
        </ul>
    </div>
</div>

仔細看上面的結構，我們多了一組 .g-stauts 結構，放置在了 .g-main 之下。其 li 個數與實際的導航 .g-nav 保持一致，並且高寬大小都是一模一樣的。

並且，可以利用絕對定位，讓其完全疊加在 .g-nav 的位置上。

然後，我們把上述類 Chrome Tab 樣式的不規則按鈕結構的 CSS 代碼結構，都賦給 .g-status 下的 li。

此時，由於不規則按鈕結構和右側的主體內容結構，其實是在一個父 div 之下，所以，我們只需要給 .g-main 元素添加 filter: drop-shadow()，就可以實現一整個整體的陰影效果：

最後，我們利用 :has() 僞類，傳遞實時的 Hover 狀態，把內外的結構連接起來。

最爲核心的代碼如下：

.g-main {
    background: #ddd;
    filter: drop-shadow(0 0 3px #999);
}
.g-status {
    position:absolute;
    left: -160px;
    top: 0;
    width: 160px;

    li {
        width: 160px;
        height: 36px;
        position: relative;
        background: #ddd;
        opacity:0;

        &::before,
        &::after {
            content: "";
            position: absolute;
            right: 0;
            border-radius: unset;
        }
        &::before {
            width: 20px;
            height: 20px;
            top: -20px;
            background: radial-gradient(circle at 0 0, transparent, transparent 19.5px, #ddd 20px, #ddd);
        }
        &::after {
            width: 20px;
            height: 20px;
            bottom: -20px;
            background: radial-gradient(circle at 0 100%, transparent, transparent 19.5px, #ddd 20px, #ddd);
        }
    }
}
.g-status li {
    opacity: 0;
}
.g-nav:has(li:nth-child(1):hover) + .g-main {
    .g-status li:nth-child(1) {
        opacity: 1;
    }
}
.g-nav:has(li:nth-child(2):hover) + .g-main {
    .g-status li:nth-child(2) {
        opacity: 1;
    }
}
.g-nav:has(li:nth-child(3):hover) + .g-main {
    .g-status li:nth-child(3) {
        opacity: 1;
    }
}
.g-nav:has(li:nth-child(4):hover) + .g-main {
    .g-status li:nth-child(4) {
        opacity: 1;
    }
}

什麼意思呢？解釋一下：

事先把每一個 Tab 被 Hover 時的樣式，都寫在了 .g-stauts 中，並且再提醒一下，這個結構是在 .g-main 之下的。然後，默認設置隱藏即可；
實際觸發 Hover 動畫效果，是正常的 .g-nav 下的一個一個的 li 結構；
當 .g-nav 下的一個一個的 li 被 Hover 時，我們通過 :has() 僞類，能夠拿到此事件，並且根據當前是第幾個元素被 hover，對應的控制實際在 .g-main 下的結構進行樣式的展示；

不太瞭解的 :has() 僞類的小夥伴，可以先讀一讀這篇文章 -- 淺談邏輯選擇器 is、where、not、has，此僞類的誕生，填補了在之前 CSS 選擇器中，沒有父選擇器的空缺。讓我們能夠在父元素節點上，根據子元素的狀態變化，做出樣式的調整。

這樣，我們就最終實現了我們文章一開始的效果：

文章可能有部分內容沒有闡述的很清晰，完整的代碼其實行數非常之少，對文章內容還不太理解的建議戳進 DEMO 中看看。

完整的 DEMO 效果：CodePen Demo -- Tab Hover Effect

有小夥伴會有疑問，爲什麼不直接在 .g-nav 導航結構和 .g-main 結構的父節點直接添加 drop-shadow()，不是也可以實現一樣的效果嗎？

是的，對於本文貼出的代碼效果，是可以實現一樣的效果。但是，實際業務中，.g-nav 會更復雜，它們的共同父元素下也可能還有其他元素，實際情況遠比本文貼出來的結構複雜，因此藉助多一層虛擬 ul，實際上是更好的解法。

最後

好了，本文到此結束，希望本文對你有所幫助 😃

更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

【佈局進階】巧用 :has & drop-shadow 實現複雜佈局效果

藉助僞元素實現不規則按鈕

利用 drop-shadow 實現按鈕陰影

修改佈局結構，再借助利用 drop-shadow 實現統一陰影

最後

Window 安裝 Python 失敗 0x80070643，發生嚴重錯誤

【佈局進階】巧用 :has & drop-shadow 實現複雜佈局效果

現代 CSS 解決方案：accent-color 強調色

【動畫進階】神奇的 3D 卡片反光閃爍動效

現代 CSS 解決方案：文字顏色自動適配背景色！

帶圓角的虛線邊框？CSS 不在話下

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結