在日常開發中會使用帶箭頭的彈出對話框，有時為了美觀或者突出，會添加一個陰影。由于圖形不規則且可能是由多個元素拼接而成的，這樣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對于背景色透明的元素依然是起作用的。

當前名稱：web前端入門到實戰：css實現不規則圖形的陰影（如對話框）-創新互聯
文章路徑：http://vcdvsql.cn/article28/iegjp.html

成都網站建設公司_創新互聯，為您提供用戶體驗、網站維護、電子商務、品牌網站制作、網站設計公司、網站排名

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯