伪类
伪类技巧教学前,要区分两个重要概念。伪类和伪元素,两者常常被人弄混。因为两者确实长得太像了,尤其在css3之前,两者在使用形式上还一摸一样,没有规范可言。在css3之后两者形式上做了区分去,单个冒号是伪类,两个冒号是伪元素。
伪类应用
众所周知,Animate/transition box-shadow 可以使用box-shadow属性来实现盒子阴影效果,但repaint消耗较多,于是这里提出通过修改伪元素的透明度来实现盒子阴影实现原理:通过改变透明度,这样从一个非默认值更新它的值,就不需要承担任何重绘(参见:https://csstriggers.com/opacity)(ps:貌似莫名的解锁了一个关于前端css优化,坏笑坏笑)这里设置一个空的伪元素设置阴影透明度为0隐藏,再通过鼠标悬停恢复它的透明度。
实现原理:三边设置边框,箭头指向的那个方向的border不用设置,位于箭头两边的边框颜色为透明(transparent),对边为主体边框颜色(较大的)/主体背景颜色(较小的),因为我们要有边框颜色的三角箭头,当第一个箭头(较大的)被第二个箭头(较小的)通过准确覆盖之后剩下没被覆盖的边缘就是合成三角箭头的边框了,其颜色就是较大的那个三角箭头的颜色,可调。而较小的那个三角箭头的颜色要设置成主体颜色,进行负值定位偏移时要把主体边框盖住,从而与主体合在一起了。