不规则图形的阴影(如对话框)

末鹿安然 提交于 2019-11-28 19:43:01

本文转载于:猿2048网站不规则图形的阴影(如对话框)

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

这里推荐一个类似的属性,filter下的drop-shadow

<div class="triangle"> </div>
.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对于背景色透明的元素依然是起作用的。

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!