（实战）多边形，梯形盒阴影css实现技巧

Noodles 发布于2019-08-30 14:11 / 2896人阅读

摘要：一般情况下，我们给块状元素四边形添加阴影样式，直接用就可以了，但是总有一些需求是那么的特别，例如下图要求给这样的梯形盒外围加阴影，第一眼感觉也没啥特别的，但是搞起来就知道多烦了。反正我是折腾了好一会儿，最后只能用下面这样实现了。

一般情况下，我们给块状元素（四边形）添加阴影样式，直接用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实战

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115841.html

（实战）多边形，梯形盒阴影css实现技巧

摘要：一般情况下，我们给块状元素四边形添加阴影样式，直接用就可以了，但是总有一些需求是那么的特别，例如下图要求给这样的梯形盒外围加阴影，第一眼感觉也没啥特别的，但是搞起来就知道多烦了。反正我是折腾了好一会儿，最后只能用下面这样实现了。一般情况下，我们给块状元素（四边形）添加阴影样式，直接用css box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);就...

myeveryheart 2019-08-01 18:42 评论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