欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3實現(xiàn)雙圓角Tab菜單

  發(fā)布時間：2023-08-18 14:50:59   作者： 猿橙煦的全棧修煉   我要評論
本文主要介紹了CSS3實現(xiàn)雙圓角Tab菜單，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

效果圖

image.png

分析

一個帶圓角的矩形 + 左右對稱的不規(guī)則圖形（一個小矩形分別去掉一個圓角），利用偽元素 ::before ::after 和 box-shadow 陰影實現(xiàn)。

image.png

image.png

image.png

image.png

代碼結(jié)構(gòu)

<div class="tab-box">
    <div class="tab-item">TAB 1</div>
    <div class="tab-item active">TAB 2</div>
    <div class="tab-item">TAB 3</div>
    <div class="tab-item">TAB 4</div>
</div>
* {
    margin: 0;
    padding: 0;
}
.tab-box {
    display: flex;
    align-items: center;
    background: #e44f26;
}
.tab-box .tab-item {
    position: relative;
    flex: 1;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    background: #e44f26;
}
.tab-box .active {
    background: #fff;
    color: #333;
    z-index: 1;
}

image.png

1. 頂部圓角實現(xiàn)

.tab-box .active {
    border-radius: 20px 20px 0 0;
}

image.png

2. 底部外圓角實現(xiàn)(借助 CSS3 偽元素)

.tab-box .active::before {
    content: "";
    position: absolute;
    left: -21px;
    bottom: 0;
    width: 21px;
    height: 50px;
    background: #e44f26;
    border-radius: 0 0 20px 0;
}
.tab-box .active::after {
    content: "";
    position: absolute;
    right: -21px;
    bottom: 0;
    width: 21px;
    height: 50px;
    background: #e44f26;
    border-radius: 0 0 0 20px;
}

image.png

3. 使用 box-shadow 覆蓋外圓角沒有覆蓋的區(qū)域

.tab-box .active {
    box-shadow: 20px 20px 0 0 blue, -20px 20px 0 0 blue;
}

image.png

將藍色改回白色，左右外圓角底色改成橙色

image.png

.tab-box .active::before {
    background: #e44f26;
}
.tab-box .active::after {
    background: #e44f26;
}

image.png

到此這篇關(guān)于CSS3實現(xiàn)雙圓角Tab菜單的文章就介紹到這了,更多相關(guān)CSS3雙圓角Tab菜單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • CSS3 Tab動畫實例之背景切換動態(tài)效果

    這篇文章主要介紹了CSS3 Tab動畫實例之背景切換動態(tài)效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-08-20

  • 用CSS實現(xiàn)Tab頁切換效果的示例代碼

    這篇文章主要介紹了用CSS實現(xiàn)Tab頁切換效果的示例代碼的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-19

  • CSS實現(xiàn)Tab頁切換實例代碼

    這篇文章主要介紹了CSS實現(xiàn)Tab頁切換實例代碼,需要的朋友可以參考下
    2018-01-31

  • CSS實現(xiàn)Tab布局的簡單實例(必看)

    下面小編就為大家?guī)硪黄狢SS實現(xiàn)Tab布局的簡單實例(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-04-13

  • CSS實現(xiàn)導(dǎo)航條Tab切換的三種方法介紹

    本篇文章主要介紹了CSS實現(xiàn)導(dǎo)航條Tab切換的三種方法，包括布局、hover、label，具有一定的參考價值，有興趣的可以了解一下。
    2017-01-13

  • 純CSS實現(xiàn)導(dǎo)航欄Tab切換效果

    CSS 的強大之處有的時候超乎我們的想象，Tab 切換，常規(guī)而言確實需要用到一定的腳本才能實現(xiàn)。下面看看如何使用純CSS實現(xiàn)導(dǎo)航欄Tab切換效果
    2016-10-13

  • 利用純CSS3實現(xiàn)tab選項卡切換示例代碼

    這篇文章給大家介紹了如何利用純CSS3實現(xiàn)tab切換，實現(xiàn)的效果很簡單但很使用，而且代碼也不復(fù)雜，有需要的朋友們可以參考借鑒。
    2016-09-21

最新評論