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); }

效果图:

css制作不规则图形阴影的代码

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

css制作不规则图形阴影的代码

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

回到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);
}

效果图:

css制作不规则图形阴影的代码

即,drop-shadow是改元素整体轮廓(包括子元素)的阴影。这对于我们给复杂图形赋予阴影效果提供了很大的帮助。

PS:更接近于真正的阴影,drop-shadow对背景色透明的元素不起作用。而box-shadow对于背景色透明的元素依然是起作用的。

看完这篇文章,你们学会css制作不规则图形阴影的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读。

另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


名称栏目:css制作不规则图形阴影的代码-创新互联
网页地址:http://scyanting.com/article/pijhj.html