介绍
小编给大家分享一下css如何实现多边形和梯形盒阴影,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
一般情况下,我们给块状元素(四边形)添加阴影样式,直接用css不必:0 1 px 3 px 0 rgba(0, 0, 0, 0.1),就可以了,但是总有一些需求是那么的特别,例如下图:
要求给这样的梯形盒外围加阴影,第一眼感觉也没啥特别的,但是搞起来就知道多烦了。反正我是折腾了好一会儿,最后只能用下面这样实现了。
HTML和css (sass)代码:
& lt; div 类=癿-tab-page-box cf"比;
,,,,,,,,,,,& lt; div 类=癿-tab-page"比;
,,,,,,,,,,,,,,,& lt; a 类=癿-page-item" https://www.yisu.com/zixun/, href=" ">设置实体
设置Prodcut税法
.m-tab-page-box {
,,,位置:,相对;
}
.m-tab-page-cover {
,,,宽度:,100%;
,,,身高:,3 px;
,,,背景:,# fff;
,,,位置:,绝对;
,,,底部:,3 px;
}
.m-tab-page {
,,,:浮动,离开;
,,,边界底部:,没有;
,,,margin-bottom:, 0;
,,,显示:,inline-block;
,,,不必:,0,1 px 3 px 0, rgba (0, 0, 0, 0.1);
,,,身高:,38 px;
,,,.m-page-item {
,,,,,,,显示:,块;
,,,,,,,填充:,10 px 20 px;
,,,,,,,:浮动,离开;
,,,,,,,颜色:,# 222;
,,,,,,,粗细:,大胆;
,,,,,,,,margin-bottom: 0;
,,,,,,,背景:,# edf0f2;
,,,,,,,,.current {
,,,,,,,,,,,背景:,# fff;
,,,,,,,,,,,:边境,没有;
,,,,,,,}
,,,}
}
.tab-search-block {
,,,背景:,# fff;
,,,不必:,0,1 px 3 px 0 px rgba (0, 0, 0, 0.1);
,,,margin-bottom:, 20 px;
} 实现思路:& # 39;.m-tab-page& # 39;设成行内元素,加阴影,& # 39;.tab-search-block& # 39;加阴影,重点是在& # 39;.m-tab-page-box& # 39;中添加一个& # 39;.m-tab-page-cover& # 39;,该元素的作用就是遮住& # 39;.m-tab-page& # 39;元素的底部阴影,注意& # 39;.m-tab-page-cover& # 39;的高度为盒阴影扩散的距离。
看完了这篇文章,相信你对“css如何实现多边形和梯形盒阴影”有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
