（练习）多边形和梯形框阴影css实现技巧

时间：2023-03-30 16:10:51 CSS

一般我们给块状元素（四边形）添加阴影样式，直接使用cssbox-shadow:01px3px0rgba(0,0,0,0.1);可以，但是总有一些特殊的要求，比如下图：要求在这样一个梯形盒子的外围加上阴影。反正我折腾了一段时间，最后只能用下面的来实现了。HTML和CSS（sass）代码：设置实际存在设置产品税码

.m-tab-page-box{位置:相对;}.m-tab-page-cover{宽度:100%;高度：3px；背景：#fff；位置：绝对；底部：-3px；}.m-tab-page{浮动：左；底部边框：无；保证金底部：0；显示：内联块；框阴影：01px3px0rgba(0,0,0,0.1);高度：38px；.m-page-item{显示：块；填充：10px20px；向左飘浮;颜色：#222；字体粗细：粗体；保证金底部：0；背景：#edf0f2；&.current{背景：#fff;边框：无；}}}.tab-search-block{背景：#fff;框阴影：01px3px0pxrgba(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'的高度是方框阴影展开的距离。备注：如果大家有更好的想法，欢迎留言。

上一篇：CSS3transition-duration属性

下一篇：第三集：从头实现一个pc端Vueui组件库（按钮组件之一）

（练习）多边形和梯形框阴影css实现技巧相关文章