多边形，梯形盒阴影css实现技巧
⼀般情况下，我们给块状元素（四边形）添加阴影样式，直接⽤css`    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);`就可以了，但是总有⼀些需求是那么的特别，例如下图：
要求给这样的梯形盒外围加阴影，第⼀眼感觉也没啥特别的，但是搞起来就知道多烦了。反正我是折腾了好⼀会⼉，最后只能⽤下⾯这样实现了。
HTML和CSS（sass）代码：
<div class="m-tab-page-box cf">
<div class="m-tab-page">
<a class="m-page-item" href="">Set Physical Presence </a>
<a class="m-page-item current" href="">Set Prodcut Tax Code </a>
</div>
<div class="m-tab-page-cover"></div>
</div>
<div class="tab-search-block">
<div ></div>
</div>
.m-tab-page-box{
position: relative;
}
.m-tab-page-cover{
width: 100%;
box shadow怎么设置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'的⾼度为盒阴影扩散的距离。
备注：
如果哪位有更好的思路，烦请留⾔说下啊。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。