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

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

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

效果圖：

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

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

回到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是改元素整體輪廓（包括子元素）的陰影。這對于我們給復(fù)雜圖形賦予陰影效果提供了很大的幫助。

PS：更接近于真正的陰影，drop-shadow對背景色透明的元素不起作用。而box-shadow對于背景色透明的元素依然是起作用的。

當(dāng)前名稱：web前端入門到實戰(zhàn)：css實現(xiàn)不規(guī)則圖形的陰影（如對話框）-創(chuàng)新互聯(lián)
文章路徑：http://aaarwkj.com/article28/iegjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、網(wǎng)站維護(hù)、電子商務(wù)、品牌網(wǎng)站制作、網(wǎng)站設(shè)計公司、網(wǎng)站排名

廣告

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