css制作不规则图形阴影的代码-创新互联

这篇文章主要为大家详细介绍了css制作不规则图形阴影的方法，文中示例代码介绍的非常详细，零基础也能参考此文章，感兴趣的小伙伴们可以参考一下。

为定边等地区用户提供了全套网页设计制作服务，及定边网站建设行业解决方案。主营业务为成都网站建设、成都网站制作、定边网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

在日常开发中会使用带箭头的弹出对话框，有时为了美观或者突出，会添加一个阴影。由于图形不规则且可能是由多个元素拼接而成的，这样box-shadow属性可能不能满足需求。这里推荐一个类似的属性，filter下的drop-shadow。

.triangle{
   width: 200px;
   height: 60px;
   position: relative;
   filter: drop-shadow(0 0 5px #ccc);
   background-color: #fff;
}
.triangle:after{
   content: "";
   position: absolute;
   left: 20px;
   bottom: -10px;
   width: 20px;
   height: 20px;
   background-color: #fff;
   transform: rotate(45deg);
}

效果图：

相同情况下，换成box-shadow,效果图：

即伪类构造的三角并不在阴影范围内。

回到drop-shadow，将三角的位置下移到和主体完全隔离

.triangle{
   width: 200px;
   height: 60px;
   position: relative;
   filter: drop-shadow(0 0 5px #ccc);
   background-color: #fff;
}
.triangle:after{
   content: "";
   position: absolute;
   left: 20px;
   bottom: -50px;
   width: 20px;
   height: 20px;
   background-color: #fff;
   transform: rotate(45deg);
}
效果图：
即，drop-shadow是改元素整体轮廓（包括子元素）的阴影。这对于我们给复杂图形赋予阴影效果提供了很大的帮助。
PS：更接近于真正的阴影，drop-shadow对背景色透明的元素不起作用。而box-shadow对于背景色透明的元素依然是起作用的。
看完这篇文章，你们学会css制作不规则图形阴影的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读。
另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
            

            分享名称：css制作不规则图形阴影的代码-创新互联            

            文章位置：http://6mz.cn/article/pijhj.html