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

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

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

效果圖

image.png

分析

一個帶圓角的矩形 + 左右對稱的不規(guī)則圖形（一個小矩形分別去掉一個圓角），利用偽元素 ::before ::after 和 box-shadow 陰影實(shí)現(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. 頂部圓角實(shí)現(xiàn)

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

image.png

2. 底部外圓角實(shí)現(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

將藍(lán)色改回白色，左右外圓角底色改成橙色

image.png

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

image.png

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

相關(guān)文章

最新評論