在日常开发中会使用带箭头的弹出对话框,有时为了美观或者突出,会添加一个阴影。由于图形不规则且可能是由多个元素拼接而成的,这样box-shadow属性可能不能满足需求。这里推荐一个类似的属性,filter下的drop-shadow。
效果图:
相同情况下,换成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对于背景色透明的元素依然是起作用的。
点击【右上角,关注 子瑜说IT 】持续更新IT资讯以及web前端开发教学
8年开发老码农福利赠送:网页制作,网站开发,web前端开发,从最零基础开始的的HTML+CSS+JavaScript。jQuery,Ajax,node,angular框架等到移动端小程序项目实战【视频+工具+系统路线图】都有整理,送给每一位对编程感兴趣的小伙伴
获取方式:
右上角有私信,请私信发我:01 即可获取!