<abbr id="imiao"></abbr>

<fieldset id="imiao"></fieldset>

<strike id="imiao"></strike>

（實戰）多邊形，梯形盒陰影css實現技巧

myeveryheart 發布于2019-08-01 18:42 / 1274人閱讀

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

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

要求給這樣的梯形盒外圍加陰影，第一眼感覺也沒啥特別的，但是搞起來就知道多煩了。反正我是折騰了好一會兒，最后只能用下面這樣實現了。

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;

}

實現思路：".m-tab-page"設成行內元素，加陰影，".tab-search-block"加陰影，重點是在".m-tab-page-box"中添加一個".m-tab-page-cover"，該元素的作用就是遮住".m-tab-page"元素的底部陰影，注意".m-tab-page-cover"的高度為盒陰影擴散的距離。

備注：
如果哪位有更好的思路，煩請留言說下啊。

云服務器 GPU云服務器 css梯形 css技巧 html實現圖片陰影 css實戰

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52020.html

（實戰）多邊形，梯形盒陰影css實現技巧

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

Noodles 2019-08-30 14:11 評論0 收藏0
哪些你知道或不知道的css，在這里或許都齊全

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

Jackwoo 2019-08-30 13:50 評論0 收藏0
哪些你知道或不知道的css，在這里或許都齊全

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

Bryan 2019-08-21 17:13 評論0 收藏0
哪些你知道或不知道的css，在這里或許都齊全

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

fai1017 2019-08-01 17:51 評論0 收藏0
單一div的正多邊形變換（純CSS）

摘要：所以只要把正五邊形的稍作修改就可以做出正六邊形了。有了長寬之后，就開始用來寫啰正八邊形正八邊形其實就是把正七邊形上面的三角形變成梯形，然后中間的梯形變成矩形就搞定了，正八邊形的夾角為度，計算出來的各個區域長寬如下圖。上一篇我們介紹了如何利用before和after偽元素來做Material Design風格的按鈕，里頭關鍵的技術就在于活用邊框寬度和div本體寬高，因此這篇再加碼一個效...

CatalpaFlat 2019-08-02 16:14 評論0 收藏0