web前端入門到實戰：css實現不規則圖形的陰影（如對話框）

在日常開發中會使用帶箭頭的彈出對話框，有時為了美觀或者突出，會添加一個陰影。由于圖形不規則且可能是由多個元素拼接而成的，這樣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);
}
專門建立的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學習方法和需要注意的小細節，互相交流學習，不停更新最新的教程和學習技巧（從零基礎開始到WEB前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）

效果圖：

相同情況下，換成box-shadow,效果圖：

即偽類構造的三角并不在陰影范圍內。

回到drop-shadow，將三角的位置下移到和主體完全隔離

<pre>

.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對于背景色透明的元素依然是起作用的。