10个css3伪类使用技巧和运用

1、伪类实现盒子阴影
实现原理：

通过改变透明度，这样从一个非默认值更新它的值，就不需要承担任何重绘

    
Before
    
Animate/transition box-shadow 可以使用box-shadow属性来实现盒子阴影效果，但重绘消耗较多

 


    
After
    
通过修改伪元素的透明度来实现同样的效果,没有重绘消耗

.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;
}

2、伪元素:before实现的面包屑导航栏