成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

（實(shí)戰(zhàn)）多邊形，梯形盒陰影css實(shí)現(xiàn)技巧

myeveryheart / 1282人閱讀

摘要：一般情況下，我們給塊狀元素四邊形添加陰影樣式，直接用就可以了，但是總有一些需求是那么的特別，例如下圖要求給這樣的梯形盒外圍加陰影，第一眼感覺(jué)也沒(méi)啥特別的，但是搞起來(lái)就知道多煩了。反正我是折騰了好一會(huì)兒，最后只能用下面這樣實(shí)現(xiàn)了。

一般情況下，我們給塊狀元素（四邊形）添加陰影樣式，直接用css box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);就可以了，但是總有一些需求是那么的特別，例如下圖：

要求給這樣的梯形盒外圍加陰影，第一眼感覺(jué)也沒(méi)啥特別的，但是搞起來(lái)就知道多煩了。反正我是折騰了好一會(huì)兒，最后只能用下面這樣實(shí)現(xiàn)了。

HTML和CSS（sass）代碼：

        

            

                Set Physical Presence 
                Set Prodcut Tax Code 
            

            

        


        

            

        
.m-tab-page-box{
    position: relative;
}
.m-tab-page-cover{
    width: 100%;
    height: 3px;
    background: #fff;
    position: absolute;
    bottom: -3px;
}
.m-tab-page {
    float: left;
    border-bottom: none;
    margin-bottom: 0;
    display: inline-block;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    height: 38px;

    .m-page-item {
        display: block;
        padding: 10px 20px;
        float: left;
        color: #222;
        font-weight: bold;
        margin-bottom: 0;
        background: #edf0f2;

        &.current {
            background: #fff;
            border: none;

        }
    }

}

.tab-search-block{
    background: #fff;
    box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;

}

實(shí)現(xiàn)思路：".m-tab-page"設(shè)成行內(nèi)元素，加陰影，".tab-search-block"加陰影，重點(diǎn)是在".m-tab-page-box"中添加一個(gè)".m-tab-page-cover"，該元素的作用就是遮住".m-tab-page"元素的底部陰影，注意".m-tab-page-cover"的高度為盒陰影擴(kuò)散的距離。

備注：
如果哪位有更好的思路，煩請(qǐng)留言說(shuō)下啊。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52020.html

相關(guān)文章

  • （實(shí)戰(zhàn)）多邊形，梯形盒陰影css實(shí)現(xiàn)技巧

    摘要：一般情況下，我們給塊狀元素四邊形添加陰影樣式，直接用就可以了，但是總有一些需求是那么的特別，例如下圖要求給這樣的梯形盒外圍加陰影，第一眼感覺(jué)也沒(méi)啥特別的，但是搞起來(lái)就知道多煩了。反正我是折騰了好一會(huì)兒，最后只能用下面這樣實(shí)現(xiàn)了。 一般情況下，我們給塊狀元素（四邊形）添加陰影樣式，直接用css box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);就...

    Noodles 評(píng)論0 收藏0

  • 哪些你知道或不知道的css，在這里或許都齊全

    摘要：簡(jiǎn)單就意味著更快的開(kāi)發(fā)速度，更小的維護(hù)成本，同時(shí)往往具有更好的體驗(yàn)下面我介紹哪些或許你不知道小技巧。默認(rèn)為，此時(shí)陰影與元素同樣大。如果沒(méi)有指定，則由瀏覽器決定通常是的值，不過(guò)目前取透明。首先，我們要明白這里的最小寬度值是什么意思。 暑假實(shí)習(xí)的時(shí)候帶我的師傅，告訴我要注重基礎(chǔ)，底層實(shí)現(xiàn)原理。才能在日新月異的技術(shù)行業(yè)站住腳跟，以不變應(yīng)萬(wàn)變，萬(wàn)丈高樓平地起，所以我們應(yīng)該不斷的去學(xué)習(xí)，去交流。...

    Jackwoo 評(píng)論0 收藏0

  • 哪些你知道或不知道的css，在這里或許都齊全

    摘要：簡(jiǎn)單就意味著更快的開(kāi)發(fā)速度，更小的維護(hù)成本，同時(shí)往往具有更好的體驗(yàn)下面我介紹哪些或許你不知道小技巧。默認(rèn)為，此時(shí)陰影與元素同樣大。如果沒(méi)有指定，則由瀏覽器決定通常是的值，不過(guò)目前取透明。首先，我們要明白這里的最小寬度值是什么意思。 暑假實(shí)習(xí)的時(shí)候帶我的師傅，告訴我要注重基礎(chǔ)，底層實(shí)現(xiàn)原理。才能在日新月異的技術(shù)行業(yè)站住腳跟，以不變應(yīng)萬(wàn)變，萬(wàn)丈高樓平地起，所以我們應(yīng)該不斷的去學(xué)習(xí)，去交流。...

    Bryan 評(píng)論0 收藏0

  • 哪些你知道或不知道的css，在這里或許都齊全

    摘要：簡(jiǎn)單就意味著更快的開(kāi)發(fā)速度，更小的維護(hù)成本，同時(shí)往往具有更好的體驗(yàn)下面我介紹哪些或許你不知道小技巧。默認(rèn)為，此時(shí)陰影與元素同樣大。如果沒(méi)有指定，則由瀏覽器決定通常是的值，不過(guò)目前取透明。首先，我們要明白這里的最小寬度值是什么意思。 暑假實(shí)習(xí)的時(shí)候帶我的師傅，告訴我要注重基礎(chǔ)，底層實(shí)現(xiàn)原理。才能在日新月異的技術(shù)行業(yè)站住腳跟，以不變應(yīng)萬(wàn)變，萬(wàn)丈高樓平地起，所以我們應(yīng)該不斷的去學(xué)習(xí)，去交流。...

    fai1017 評(píng)論0 收藏0

  • 單一div的正多邊形變換（純CSS）

    摘要：所以只要把正五邊形的稍作修改就可以做出正六邊形了。有了長(zhǎng)寬之后，就開(kāi)始用來(lái)寫(xiě)啰正八邊形正八邊形其實(shí)就是把正七邊形上面的三角形變成梯形，然后中間的梯形變成矩形就搞定了，正八邊形的夾角為度，計(jì)算出來(lái)的各個(gè)區(qū)域長(zhǎng)寬如下圖。 上一篇我們介紹了如何利用before和after偽元素來(lái)做Material Design風(fēng)格的按鈕，里頭關(guān)鍵的技術(shù)就在于活用邊框?qū)挾群蚫iv本體寬高，因此這篇再加碼一個(gè)效...

    CatalpaFlat 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<