css制作不规则图形阴影的代码
这篇文章主要为大家详细介绍了css制作不规则图形阴影的方法,文中示例代码介绍的非常详细,零基础也能参考此文章,感兴趣的小伙伴们可以参考一下。
创新互联公司,为您提供成都网站建设、成都网站制作、网站营销推广、网站开发设计,对服务成都小搅拌车等多个行业拥有丰富的网站建设及推广经验。创新互联公司网站建设公司成立于2013年,提供专业网站制作报价服务,我们深知市场的竞争激烈,认真对待每位客户,为客户提供赏心悦目的作品。 与客户共同发展进步,是我们永远的责任!
在日常开发中会使用带箭头的弹出对话框,有时为了美观或者突出,会添加一个阴影。由于图形不规则且可能是由多个元素拼接而成的,这样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制作不规则图形阴影的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读。
网站栏目:css制作不规则图形阴影的代码
浏览地址:http://scyanting.com/article/gcdpio.html