web前端入門到熱戰:css實行不規則圖形的暗影(如會話框)

PS:更近於真正的暗影,drop-shadow對背景物透明的元素失靈。而box-shadow對於背景物透明的元素傲然是起效用的。

即,drop-shadow是改元素群體輪廓(涵蓋子元素)的暗影。這對於我們給復雜圖形賦予暗影效果提供了巨大的幫忙。

web前端入門到熱戰:css實行不規則圖形的暗影(如會話框)

.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);
}

效果圖:

<pre>

回到drop-shadow,將三角學的位置下移到和主體純粹隔離

即偽類建構的三角學並不在暗影范圍內。

web前端入門到熱戰:css實行不規則圖形的暗影(如會話框)

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

web前端入門到熱戰:css實行不規則圖形的暗影(如會話框)

<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屬性可能不得知足需要。這搭引薦一個類似的屬性,filter下的drop-shadow。


發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *