不规则图形的阴影（如对话框）
本文转载于: 猿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 ;