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

众所周知，Animate/transition box-shadow可以使用box-shadow属性来实现盒子阴影效果，但是重画用的比较多，所以这里我们提出通过改变伪元素的透明度来实现盒子阴影

实现原理：

通过改变透明度，使得从非默认值更新其值不需要任何重绘：https :/ /csstriggers.com/opacity）

（ps：我好像莫名其妙解锁了一个关于前端css优化的功能，邪恶地笑）

这里设置一个空的伪元素，将阴影不透明度设置为0来隐藏它，然后使用鼠标将鼠标悬停在“停止”上以恢复其透明度。下面是传统和伪类实现的代码对比

<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;
}
复制代码

效果：

作者：codercao