不规则图形的阴影（如对话框）

本文转载于:猿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对于背景色透明的元素依然是起做用的。