css 对话框阴影,科技常识：css实现不规则图形的阴影（如对话框）

今天小编跟大家讲解下有关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);

}

效果图：

相同情况下，换成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对于背景色透明的元素依然是起作用的。

来源：爱蒂网

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。