在日常開發(fā)中會使用帶箭頭的彈出對話框，有時(shí)為了美觀或者突出，會添加一個(gè)陰影。由于圖形不規(guī)則且可能是由多個(gè)元素拼接而成的，這樣box-shadow屬性可能不能滿足需求。這里推薦一個(gè)類似的屬性，filter下的drop-shadow。

創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司一直秉承“誠信做人，踏實(shí)做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個(gè)客戶多一個(gè)朋友！專注中小微企業(yè)官網(wǎng)定制，成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)，塑造企業(yè)網(wǎng)絡(luò)形象打造互聯(lián)網(wǎng)企業(yè)效應(yīng)。

.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);
}
專門建立的學(xué)習(xí)Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學(xué)習(xí)方法和需要注意的小細(xì)節(jié)，互相交流學(xué)習(xí)，不停更新最新的教程和學(xué)習(xí)技巧（從零基礎(chǔ)開始到WEB前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）

效果圖：

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

即偽類構(gòu)造的三角并不在陰影范圍內(nèi)。

回到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是改元素整體輪廓（包括子元素）的陰影。這對于我們給復(fù)雜圖形賦予陰影效果提供了很大的幫助。
PS：更接近于真正的陰影，drop-shadow對背景色透明的元素不起作用。而box-shadow對于背景色透明的元素依然是起作用的。
            

            文章題目：web前端入門到實(shí)戰(zhàn)：css實(shí)現(xiàn)不規(guī)則圖形的陰影（如對話框）-創(chuàng)新互聯(lián)            

            文章源于：http://weahome.cn/article/iegjp.html