css制作不規則圖形陰影的代碼

這篇文章主要為大家詳細介紹了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);
}

效果圖：

相同情況下，換成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對于背景色透明的元素依然是起作用的。

看完這篇文章，你們學會css制作不規則圖形陰影的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀。