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