概述
一般情况下,我们给块状元素(四边形)添加阴影样式,直接用cssbox-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
就可以了,但是总有一些需求是那么的特别,例如下图:
要求给这样的梯形盒外围加阴影,第一眼感觉也没啥特别的,但是搞起来就知道多烦了。反正我是折腾了好一会儿,最后只能用下面这样实现了。
详述
HTML和CSS(sass)代码:
1 | <div class="m-tab-page-box cf"> |
1 | .m-tab-page-box{ |
实现思路:
‘.m-tab-page’设成行内元素,加阴影,’.tab-search-block’加阴影,重点是在’.m-tab-page-box’中添加一个’.m-tab-page-cover’,该元素的作用就是遮住’.m-tab-page’元素的底部阴影,注意’.m-tab-page-cover’的高度为盒阴影扩散的距离。
后记
如果哪位有更好的思路,烦请留言说下啊。