css如何使用偽類實現盒子陰影

這篇文章給大家分享的是有關css如何使用偽類實現盒子陰影的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

偽類實現盒子陰影

眾所周知，Animate/transition box-shadow 可以使用box-shadow屬性來實現盒子陰影效果，但repaint消耗較多，于是這里提出通過修改偽元素的透明度來實現盒子陰影

實現原理：

**通過改變透明度，這樣從一個非默認值更新它的值，就不需要承擔任何重繪

這里設置一個空的偽元素設置陰影透明度為0隱藏，再通過鼠標懸停恢復它的透明度，下面是傳統和偽類實現的代碼對比

<div class="before">
    <h2>Before</h2>
    <p>Animate/transition box-shadow 可以使用box-shadow屬性來實現盒子陰影效果，但重繪消耗較多</p>
</div>
 <hr />
<div class="after">
    <h2>After</h2>
    <p>通過修改偽元素的透明度來實現同樣的效果,沒有重繪消耗</p>
</div>

.before {
    padding: 1em;
    background-color: #fff;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}
.before:hover {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}
.after {
    position: relative;
    padding: 1em;
    background-color: #fff;
}
.after:before {
    content: "";
    position: absolute;  
    top: 0;
    right: 0;
    bottom: 0;  
    left: 0;
    z-index: -1;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    opacity: 0;
    will-change: opacity;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}
.after:hover:before {
    opacity: 1;
}

感謝各位的閱讀！關于“css如何使用偽類實現盒子陰影”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！