css3伪类使用技巧：实现盒子阴影

众所周知，Animate/transition box-shadow 可以使用box-shadow属性来实现盒子阴影效果，但repaint消耗较多，于是这里提出通过修改伪元素的透明度来实现盒子阴影文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9073.html

实现原理：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9073.html

通过改变透明度，这样从一个非默认值更新它的值，就不需要承担任何重绘（参见：https://csstriggers.com/opacity）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9073.html

(ps:貌似莫名的解锁了一个关于前端css优化，坏笑坏笑)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9073.html

这里设置一个空的伪元素设置阴影透明度为0隐藏，再通过鼠标悬停恢复它的透明度，下面是传统和伪类实现的代码对比文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9073.html

<div class="before">
    <h1>Before</h1>
    <p>Animate/transition box-shadow 可以使用box-shadow属性来实现盒子阴影效果，但重绘消耗较多</p>
</div>
 <hr />
<div class="after">
    <h1>After</h1>
    <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;
}
复制代码

效果：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9073.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9073.html