前言
伪类经常与伪元素混淆，伪元素的效果类似于通过添加一个实际的元素才能达到，而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。伪类与伪元素的本质区别就是是否抽象创造了新元素。
正文
话不多说我们直接上代码
<!DOCTYPE html>
代码解释
如上，我设置了两个 div，它们的 class 分别设置为 before 和 after。
before box-shadow
大家都知道 Animate/transition box-shadow 可以使用 box-shadow 属性来实现盒子阴影效果，所以我们先用 box-shadow 给 before 设置盒子阴影。
.这部分代码是给 before 设置样式，padding 内边距设置成当前字体尺寸，background-color 背景色设置成 白色，transition 过渡时长为 0.2 秒，-webkit-transition 兼容 webkit 内核浏览器的过渡。
.如上代码是给 before 设置鼠标悬停效果，这里的效果设置为盒子阴影。
after
我们都知道如上 box-shadow 属性是用来实现盒子阴影效果，但 repaint 消耗较多，于是这里提出通过修改伪元素的透明度来实现盒子阴影。
实现原理：通过改变透明度，这样从一个非默认值更新它的值，就不需要承担任何重绘
设置一个空的伪元素设置阴影透明度为 0 隐藏
.再通过鼠标悬停恢复它的透明度
.如上设置之后就能实现与 box-shadow 同样的效果还不用重绘。
总结
如上给 div 设置盒子阴影的效果如下
知乎视频www.zhihu.com
扫一扫
899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
